Html 具有动态列数的CSS网格容器

我有一个带有这些设置的网格容器-

  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列。额外的柱将被添加到第三个，而不是末尾，因此在插入额外的柱后，网格应-

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

这是密码

函数addColumn（）{
var g=document.querySelector（“.my_grid”）；
var div=document.createElement（“div”）；
div.setAttribute（“id”、“column9”）；
g、 儿童组;；
}

正文{
保证金：0；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.我的网格{
显示：网格；
网格模板列：1fr 1fr 2fr repeat（4，1fr）2rem；
网格自动流：列；
网格自动列：1fr；
身高：100%；
宽度：100%；
}
.my_grid div{
框大小：边框框；
过渡：.5s线性全部；
}
#Column1{背景：#0000}
#Column2{背景：#0001}
#第3列{背景：#0002}
#Column4{背景：#0003}
#第5列{背景：#0004}
#第6栏{背景：#0005}
#第7栏{背景：#0006}
#第8栏{背景：#0007}
#Column9{背景：#0008；边框：1px纯红；}
钮扣{
位置：固定；
排名：0；
左：0；
高度：40px；
宽度：100px；
}

2rem
添加列

您可以依赖order属性和在开始时创建隐式额外列。诀窍是使用第n个孩子来考虑有9个项目的情况，以便：

• 将第一项放置在显式网格之外。它将使用隐式（1fr将在开始时添加）
• 将最后一项第9列放在开头
• 强制第2列中的项目位于第9列之前

函数addColumn（）{
var g=document.querySelector（“.my_grid”）；
var div=document.createElement（“div”）；
div.setAttribute（“id”、“column9”）；
g、 儿童组;；
document.querySelector（“按钮”）.style.display=“无”；
}

正文{
保证金：0；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.我的网格{
显示：网格；
网格模板列：1fr 1fr 2fr repeat（4，1fr）2rem；
网格自动流：列；
网格自动列：1fr；/*我们的隐式列*/
身高：100%；
宽度：100%；
}
.my_grid div{
框大小：边框框；
过渡：.5s线性全部；
}
#Column1{背景：#0000}
#Column2{背景：#0001}
#第3列{背景：#0002}
#Column4{背景：#0003}
#第5列{背景：#0004}
#第6栏{背景：#0005}
#第7栏{背景：#0006}
#第8栏{背景：#0007}
#科隆9{
背景：#0008；
边框：1px纯红；
订单：-1；/*放在起始位置*/
}
/*以下内容将仅触发9列*/
#第1列：第一个孩子：第n个最后一个孩子（9）{
背景：绿色；
网格列：-10；/*所有内容前面的位置为显式网格*/
}
#第2列：第n个孩子（2）：第n个最后一个孩子（8）{
背景：蓝色；
订单：-1；/*放在第9列之前*/
}
钮扣{
位置：固定；
排名：0；
左：0；
高度：40px；
宽度：100px；
}

2rem
添加列

您可以依赖order属性和在开始时创建隐式额外列。诀窍是使用第n个孩子来考虑有9个项目的情况，以便：

• 将第一项放置在显式网格之外。它将使用隐式（1fr将在开始时添加）
• 将最后一项第9列放在开头
• 强制第2列中的项目位于第9列之前

函数addColumn（）{
var g=document.querySelector（“.my_grid”）；
var div=document.createElement（“div”）；
div.setAttribute（“id”、“column9”）；
g、 儿童组;；
document.querySelector（“按钮”）.style.display=“无”；
}

正文{
保证金：0；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.我的网格{
显示：网格；
网格模板列：1fr 1fr 2fr repeat（4，1fr）2rem；
网格自动流：列；
网格自动列：1fr；/*我们的隐式列*/
身高：100%；
宽度：100%；
}
.my_grid div{
框大小：边框框；
过渡：.5s线性全部；
}
#Column1{背景：#0000}
#Column2{背景：#0001}
#第3列{背景：#0002}
#Column4{背景：#0003}
#第5列{背景：#0004}
#第6栏{背景：#0005}
#第7栏{背景：#0006}
#第8栏{背景：#0007}
#科隆9{
背景：#0008；
边框：1px纯红；
订单：-1；/*放在起始位置*/
}
/*以下内容将仅触发9列*/
#第1列：第一个孩子：第n个最后一个孩子（9）{
背景：绿色；
网格列：-10；/*所有内容前面的位置为显式网格*/
}
#第2列：第n个孩子（2）：第n个最后一个孩子（8）{
背景：蓝色；
订单：-1；/*放在第9列之前*/
}
钮扣{
位置：固定；
排名：0；
左：0；
高度：40px；
宽度：100px；
}

2rem
Add Column

如果我做对了，您希望添加一个动态div，或者在末尾添加了一个div。以下是你如何让它成为第三名的方法

正文{
保证金：0；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.我的网格{
显示：网格；
网格模板列：1fr 1fr 2fr repeat（4，1fr）2rem；
网格自动流：列；
网格自动列：1fr；
身高：100%；
宽度：100%；
}
.my_grid div{
框大小：边框框；
过渡：0.5s线性所有；
}
#科隆1{
背景：#万；
}
#Column2{
背景：#0001；
}
#Column3{
背景：#0002；
}
#科隆4{
背景：#0003；
}
#科隆5{
背景：#0004；
}
#科隆6{
背景：#0005；
}
#Column7{
背景：#0006；
}
#科隆8{
背景：#0007；
}
#科隆9{
背景：红色；
边框：1px纯红；
网格柱：3/4；
}

---

如果我做对了，您希望添加一个动态div，或者在末尾添加一个div。以下是你如何让它成为第三名的方法

正文{
保证金：0；
宽度：100vw；
高度：100vh；
溢出：隐藏；
}
.我的