CSS Сетка-контейнер с динамиками c количество столбцов

Question

У меня есть контейнер сетки с этими настройками -

  display: grid;
  grid-template-columns: 1fr 1fr 2fr repeat(4, 1fr) 2rem;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: 100%;
  width: 100%;

Я изначально установил контейнер на 8 столбцов. Проблема в том, что в некоторых случаях будет 9 столбцов. Дополнительный столбец будет добавлен как 3-й, а не в конце, поэтому после вставки дополнительного столбца сетка должна быть -

grid-template-columns: 1fr 1fr 1fr 2fr repeat(4, 1fr) 2rem;

Вот код

function addColumn(){
  var g = document.querySelector(".my_grid");
  var div = document.createElement("div");
  div.setAttribute("id", "coloumn9");
  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;
}

#coloumn1{background: #0000}
#coloumn2{background: #0001}
#coloumn3{background: #0002}
#coloumn4{background: #0003}
#coloumn5{background: #0004}
#coloumn6{background: #0005}
#coloumn7{background: #0006}
#coloumn8{background: #0007}
#coloumn9{background: #0008; border:1px solid red;}

button {
  position: fixed;
  top: 0;
  left: 0;
  height: 40px;
  width: 100px;
}

<div class="my_grid">
  <div id="coloumn1"></div>
  <div id="coloumn2"></div>
  <div id="coloumn3"></div>
  <div id="coloumn4"></div>
  <div id="coloumn5"></div>
  <div id="coloumn6"></div>
  <div id="coloumn7"></div>
  <div id="coloumn8">
    2rem
  </div>
</div>
<button onclick="addColumn()">Add Column</button>

Итак, вопрос в том, как справиться с этой ситуацией? Я попытался установить его динамически с автозаполнением, но он не работает.

Answer 1

Если я правильно понял, вы хотите добавить динамический c div или есть 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: 0.5s linear all;
}

#coloumn1 {
  background: #0000;
}

#coloumn2 {
  background: #0001;
}

#coloumn3 {
  background: #0002;
}

#coloumn4 {
  background: #0003;
}

#coloumn5 {
  background: #0004;
}

#coloumn6 {
  background: #0005;
}

#coloumn7 {
  background: #0006;
}

#coloumn8 {
  background: #0007;
}

#coloumn9 {
  background: red;
  border: 1px solid red;
  grid-column: 3 / 4;
}

<div class="my_grid">
  <div id="coloumn1"></div>
  <div id="coloumn2"></div>
  <div id="coloumn3"></div>
  <div id="coloumn4"></div>
  <div id="coloumn5"></div>
  <div id="coloumn6"></div>
  <div id="coloumn7"></div>
  <div id="coloumn8"></div>
  <div id="coloumn9"></div>
</div>

Answer 2

Вы можете положиться на свойство порядка и создание неявного дополнительного столбца в начале. Хитрость заключается в том, чтобы использовать nth-child для рассмотрения случая, когда имеется 9 элементов, чтобы:

• Поместить первый элемент за пределы явной сетки. Он будет использовать неявный (1fr будет добавлен в начале)
• Поместить последний столбец элемента 9 в начале.
• Принудительно установить столбец элемента 2 перед столбцом 9

function addColumn(){
  var g = document.querySelector(".my_grid");
  var div = document.createElement("div");
  div.setAttribute("id", "coloumn9");
  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;
}

#coloumn1{background: #0000}
#coloumn2{background: #0001}
#coloumn3{background: #0002}
#coloumn4{background: #0003}
#coloumn5{background: #0004}
#coloumn6{background: #0005}
#coloumn7{background: #0006}
#coloumn8{background: #0007}

#coloumn9{
  background: #0008; 
  border:1px solid red;
  order:-1; /* place at the start */
}

/* The below will trigger only with 9 columns */
#coloumn1:first-child:nth-last-child(9) {
  background:green;
  grid-column:-10; /* place before everything outisde the explicit grid */
}
#coloumn2: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="coloumn1"></div>
  <div id="coloumn2"></div>
  <div id="coloumn3"></div>
  <div id="coloumn4"></div>
  <div id="coloumn5"></div>
  <div id="coloumn6"></div>
  <div id="coloumn7"></div>
  <div id="coloumn8">
    2rem
  </div>
</div>
<button onclick="addColumn()">Add Column</button>