Html 我可以使用css网格在两行上以从左到右的阅读顺序显示未知数量的项目吗？

我想按从左到右的顺序显示一些div，给它们相等的空间，并将它们分布在两行上

e、 g

[div 1]|[div 2]|[div 3]
[第4分册]|[第5分册]|[第6分册]

或

[div 1]|[div 2]|[div 3]|[div 4]
[div 5]|[div 6]|[div 7]|[div 8]

重要的是我不知道会有多少元素。如果是六列，那么我需要三列。如果是八，那么我需要四列。等等

如果我为网格容器提供以下属性：

  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);

然后，我的元素被赋予了正确的空间量，但以错误的顺序显示

[div 1]|[div 3]|[div 5]|[div 7]
[div 2]|[div 4]|[div 6]|[div 8]

如果我为网格容器指定以下属性：

  grid-auto-flow: row;
  grid-template-rows: repeat(2, 1fr);

然后元素显示在一列中

[div 1]
[div 2]

---

如果我不知道将有多少个元素，是否有一种简单的方法可以跨两行显示我的元素，同时保持从左到右的阅读顺序？

您需要javascript来计算网格列的最小宽度值，然后自动调整，mimax（）就可以了

可能的例子

let yop=document.querySelectorAll（“#test div”）
document.body.style.setProperty（'--minWidth'，Math.ceil（200/yop.length）-1+'%'）
#测试{
显示：网格；
网格模板列：重复（自动拟合，最小值（var（--minWidth），1fr））；
计数器复位：divs；
/*宽度：800px；或不*/
}
div div{
边框：实心；
框大小：边框框；
}
分区：以前{
反增量：divs；
内容：柜台（divs）；
}
这是一种仅使用CSS的解决方案，您需要编写一些CSS来覆盖许多情况。下面的代码最多包含12个元素，CSS并没有那么大。您可以继续添加更多内容以涵盖更多案例


.box{
显示：网格；
网格自动流：列；
网格自动列：1fr；
计数器复位：divs；
保证金：5px；
边框：1px实心；
}
.包厢部{
边框：1px纯红；
}
.包厢分区：以前{
反增量：divs；
内容：柜台（divs）；
}
.box div:第n个子项（1）：第n个最后一个子项（2）~*，
.box div:第n个子项（2）：第n个最后一个子项（3）~*，
.box div:n个孩子（3）：n个最后的孩子（4）~*，
.box div:n个孩子（4）：n个最后的孩子（5）~*，
.box div:n个孩子（5）：n个最后的孩子（6）~*，
盒子分区：第n个孩子（6）：第n个最后一个孩子（7）~*
/*
.box div:N个子项（N）：N个最后的子项（N+1）~*
*/{
网格行：2；
}

如果您不知道项目的数量，那么如果没有Javascript，CSS网格无法帮助您确定列的数量。这很公平。如果没有一点Javascript就做不到，那么至少我现在知道了。谢谢你知道吗？这实际上非常适合我的用例。非常感谢。