如何用CSS实现Grid组件动态列优先排列？适配任意子元素

API 探路者

2026-7-25

实现自适应任意元素数量的列优先Grid布局

直接用以下纯CSS代码就能搞定，完全不需要硬编码行数，适配任意数量的<li>元素：

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
}

原理说明

grid-auto-flow: column 把Grid默认的行优先排列改成了列优先，元素会先填满第一列的所有行，再自动切换到第二列继续填充
grid-auto-rows: 1fr 让自动生成的每一行高度均等，保证布局整齐
不管列表项是偶数还是奇数（比如7个元素），都会自动调整列内的元素数量，第一列比第二列多1个，完美保持列优先逻辑

如果你想保留原有的行优先Grid基础配置，也可以通过order属性重新排序元素（之前没成功可能是没配合grid-column和密集排列）：

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: dense;
}

li:nth-child(odd) {
  order: 0;
  grid-column: 1;
}

li:nth-child(even) {
  order: 1;
  grid-column: 2;
}