CSS Grid container with dynamic amount of columns - html

Question

I have a grid container with those settings -
display: grid;
grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
grid-auto-flow: column;
grid-auto-columns: 1fr;
height: 100%;
width: 100%;
I initially set the container for 8 columns. The issue is that in some cases will be 9 columns. The extra column will be added to be the 3rd and not at the end, so after the insertion of the extra column the grid should be -
grid-template-columns: 1fr 1fr 1fr 2fr repeat(4, 1fr) 2rem;
Here is the code
function addColumn(){
var g = document.querySelector(".my_grid");
var div = document.createElement("div");
div.setAttribute("id", "column9");
g.appendChild(div);
}
body{
margin:0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.my_grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
grid-auto-flow: column;
grid-auto-columns: 1fr;
height: 100%;
width: 100%;
}
.my_grid div{
box-sizing: border-box;
transition: .5s linear all;
}
#column1 { background: #0000 }
#column2 { background: #0001 }
#column3 { background: #0002 }
#column4 { background: #0003 }
#column5 { background: #0004 }
#column6 { background: #0005 }
#column7 { background: #0006 }
#column8 { background: #0007 }
#column9 { background: #0008; border:1px solid red; }
button {
position: fixed;
top: 0;
left: 0;
height: 40px;
width: 100px;
}
<div class="my_grid">
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<div id="column4"></div>
<div id="column5"></div>
<div id="column6"></div>
<div id="column7"></div>
<div id="column8">
2rem
</div>
</div>
<button onclick="addColumn()">Add Column</button>
So the question is how to handle this situation? I tried to set it dynamically with auto-fill but it doesn't work.

Answer 1

If I get this right you want to add a dynamic div or there is a div that is added to the end. Here is how you can make it be in the third place.
body {
margin: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.my_grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
grid-auto-flow: column;
grid-auto-columns: 1fr;
height: 100%;
width: 100%;
}
.my_grid div {
box-sizing: border-box;
transition: 0.5s linear all;
}
#column1 {
background: #0000;
}
#column2 {
background: #0001;
}
#column3 {
background: #0002;
}
#column4 {
background: #0003;
}
#column5 {
background: #0004;
}
#column6 {
background: #0005;
}
#column7 {
background: #0006;
}
#column8 {
background: #0007;
}
#column9 {
background: red;
border: 1px solid red;
grid-column: 3 / 4;
}
<div class="my_grid">
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<div id="column4"></div>
<div id="column5"></div>
<div id="column6"></div>
<div id="column7"></div>
<div id="column8"></div>
<div id="column9"></div>
</div>

Answer 2

You can rely on order property and the creation of implicit extra column at the start. The trick is to use nth-child to consider the case where there is 9 items in order to:
Place the first item outside the explicit grid. It will use the implicit one (1fr will be added at the start)
Place the last item column9 at the beginning.
Force the item column2 to be before column9
function addColumn(){
var g = document.querySelector(".my_grid");
var div = document.createElement("div");
div.setAttribute("id", "column9");
g.appendChild(div);
document.querySelector("button").style.display="none";
}
body{
margin:0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.my_grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
grid-auto-flow: column;
grid-auto-columns: 1fr; /* our implicit column */
height: 100%;
width: 100%;
}
.my_grid div{
box-sizing: border-box;
transition: .5s linear all;
}
#column1 { background: #0000 }
#column2 { background: #0001 }
#column3 { background: #0002 }
#column4 { background: #0003 }
#column5 { background: #0004 }
#column6 { background: #0005 }
#column7 { background: #0006 }
#column8 { background: #0007 }
#column9 {
background: #0008;
border:1px solid red;
order:-1; /* place at the start */
}
/* The below will trigger only with 9 columns */
#column1:first-child:nth-last-child(9) {
background:green;
grid-column:-10; /* place before everything outisde the explicit grid */
}
#column2:nth-child(2):nth-last-child(8) {
background:blue;
order:-1; /* place before column9*/
}
button {
position: fixed;
top: 0;
left: 0;
height: 40px;
width: 100px;
}
<div class="my_grid">
<div id="column1"></div>
<div id="column2"></div>
<div id="column3"></div>
<div id="column4"></div>
<div id="column5"></div>
<div id="column6"></div>
<div id="column7"></div>
<div id="column8">
2rem
</div>
</div>
<button onclick="addColumn()">Add Column</button>