如何使用CSS Grid实现网格项按纵向数字顺序排列？

你当前遇到的是Grid默认排列顺序的问题——默认情况下Grid是行优先排列（填满一行再换下一行），所以才会出现1-2-3、4-5-6的效果。而咱们只需要调整一个属性，就能改成列优先排列，实现你想要的1-4-7、2-5-8的布局。

修改后的代码 #

只需要给你的Grid容器添加两行关键CSS：

.list ul {
  display: grid;
  grid-template-columns: auto auto auto; /* 保留3列的设置 */
  grid-template-rows: auto auto auto; /* 明确3行的结构 */
  grid-auto-flow: column; /* 核心：设置按列优先排列元素 */
  list-style-type: none;
  font-size: 20px;
}
.list li {
  padding-bottom: 20px;
}

原理说明 #

• grid-auto-flow: column：这是实现需求的核心，它告诉Grid容器不再按行填充，而是优先沿着列的方向排列元素——先填满第一列的3个位置，再填第二列，最后第三列。
• grid-template-rows: auto auto auto：因为咱们知道总共有9个元素，3列的话每列刚好3行，提前定义好行数可以让布局更稳定。如果元素数量不确定，也可以用repeat(3, auto)来简化写法。

这样修改后，你的布局就会变成：

1-----4-----7
2-----5-----8
3-----6-----9

内容的提问来源于stack exchange，提问作者user5481714