如果我理解正确的话，你想加一个动态的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;
}

#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>

您可以依赖order属性并在开始时创建隐式额外列。诀窍是使用nth-child来考虑有9个项的情况，以便：

• 将第一项放在显式网格之外。它将使用隐式网格（1fr将添加在开始处）
• 将最后一个项目column9放在开头。
• 强制项目column2位于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>