Html 使网格容器填充列而不是行

我希望我的网格垂直填充，如下所示：

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.

1 2 3
4 5 6
7 8 9

相反，它是水平填充的，如下所示：

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.

1 2 3
4 5 6
7 8 9

我想指定网格中的列数，而不是行数。

这就是我的div在内联CSS样式中的外观：

1.
2.
3.
4.
5.
6.
7.
8.
9
< /代码> <>对于垂直流动网格，必要时创建新列，并且未定义行，请考虑使用（）。CSS网格布局（至少是当前实现）无法执行此任务。问题是：

在CSS网格布局中，
网格自动流
和
网格模板行
/
网格模板列
属性之间存在反向关系

更具体地说，通过定义
网格自动流动：行
（默认设置）和
网格模板列
，网格项在水平方向上流动良好，根据需要自动创建新行。这个概念在问题的代码中有说明


#容器{
显示：网格；
网格模板柱：1fr 1fr 1fr；
网格自动流：行；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
与其说是一个实用的解决方案，不如说是一个技术练习，您可以根据项目的数量使用特定的样式来获得结果

让我们看看它是如何工作的：

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6) ~ .item:nth-child(n+3)

第一选择器

.item:first-child:nth-last-child(n+4):nth-last-child(-n + 6)

是活动的是我们的列表有4到6个元素。在这种情况下，某些项目将同时处于第一种状态和第二种状态

在本例中，我们希望在第一列中有两项。针对剩余的项目（从第三个开始）使用

然后把它们放在第二列。类似的规则，现在适用于第5次及以后

~ .item:nth-child(n+5)

将其他项目放入第三列。这两条规则具有相同的优先级，并以最后两项为目标，因此它们必须按此顺序出现

我们需要重复类似的规则，直到可以出现的项目的最大数量（可能是预处理器的作业）


var元素=5；
函数添加（）{
var ctn=document.getElementById（“容器”）；
var ele=document.createElement（“div”）；
元素++；
ele.innerHTML=元素；
ele.className=“项目”；
ctn.appendChild（ele）；
}
#容器{
宽度：90%；
边框：实心1px红色；
显示：网格；
网格模板行：33%33%33%；
网格自动流动：柱状密集；
}
.项目{
宽度：90%；
高度：80px；
背景颜色：浅绿色；
利润率：10px；
网格柱：1；
}
.项目：第一个孩子：第n个最后一个孩子（n+4）：第n个最后一个孩子（-n+6）~。项目：第n个子项（n+3）{
背景颜色：黄色；
网格柱：2；
}
.项目：第一个孩子：第n个最后一个孩子（n+4）：第n个最后一个孩子（-n+6）~.项目：第n个孩子（n+5）{
背景色：番茄；
网格柱：3；
}
.项目：第一个孩子：第n个最后一个孩子（n+7）：第n个最后一个孩子（-n+9）~.项目：第n个孩子（n+4）{
背景颜色：白肋木；
网格柱：2；
}
.项目：第一个孩子：第n个最后一个孩子（n+7）：第n个最后一个孩子（-n+9）~.项目：第n个孩子（n+7）{
背景色：蓝紫色；
网格柱：3；
}
.项目：第一个孩子：第n个最后一个孩子（n+10）：第n个最后一个孩子（-n+12）~.项目：第n个孩子（n+5）{
背景色：深黄色；
网格柱：2；
}
.项目：第一个孩子：第n个最后一个孩子（n+10）：第n个最后一个孩子（-n+12）~.项目：第n个孩子（n+9）{
背景色：黄绿色；
网格柱：3；
}
.项目：第一个孩子：第n个最后一个孩子（n+13）：第n个最后一个孩子（-n+15）~.项目：第n个孩子（n+6）{
背景颜色：黄色；
网格柱：2；
}
.项目：第一个孩子：第n个最后一个孩子（n+13）：第n个最后一个孩子（-n+15）~.项目：第n个孩子（n+11）{
背景色：番茄；
网格柱：3；
}
添加
1.
2.
3.
4.
5.
另一个选择是删除CSS网格并使用CSS列，这完全符合您的要求，并且具有更好的浏览器支持


.csscolumn{
-webkit列数：3；/*Chrome、Safari、Opera*/
-moz列计数：3；/*Firefox*/
列数：3；
}
/*此演示的样式*/
.csscolumn{
宽度：50%；
}
.csscolumn+.csscolumn{
边缘顶部：10px；
填充顶部：10px；
边框顶部：1px实心；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
1.
2.
3.
4.
5.
1.
2.
3.
4.
5.
6.
7.
8.
9
10
以下是一种基于CSS网格的方法，使用javascript和CSSOM插入一对：

transform: translate(x, y)

将规则转换为生成的样式表

两个变换规则（只有两个，基于栅格为3列宽置换原始单列栅格的下部图元，将图元向上和向右移动）

因此，您可以向单列网格添加任意数量的元素，脚本将始终调整网格，使其具有大小大致相同的三列

如果列的大小不能完全相等，则较高的列将始终是第一列和/或第二列（决不是最右边的第三列）

工作示例（9个网格单元）：


var numberOfColumns=3；
document.head.appendChild（document.createElement（'style'）；
var newStyles=document.styleSheets[（document.styleSheets.length-1）]；
var myGrid=document.getElementsByClassName（'my-grid'）[0]；
var myGridUnits=myGrid.getElementsByTagName（'div'）；
var tallColumn=Math.ceil（myGridUnits.length/numberOfColumns）；
var shortColumn=Math.floor（myGridUnits.length/numberOfColumns）；
var-nextUnit=1；
var unitsRemaining=myGridUnits.length；
var xTranslate，yTranslate；
var列=[]；
对于（变量i=0；i<（numberOfColumns-1）；i++）{
如果（单元保留%shortColumn==0）{
柱推（短柱）；
}
否则{
columns.push（tallColumn）；
}
nextUnit+=列[（columns.length-1）]；
UnitsMaining-=列[（columns.length-1）]；
xTranslate=（（i+1）*48）；
钇盐=0；
forEach（函数（columnHeight）{yTranslate+=（columnHeight*48）；}