如何将CSS Grid中项目的排列顺序从左右改为上下？

直接通过grid-auto-flow: column切换网格的排列逻辑，配合定义行数，就能实现你要的从上到下填充列的效果，无需复杂选择器或JS：

修改后的CSS代码 #

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* 保留3列布局 */
    grid-template-rows: 1fr 1fr; /* 对应6个元素，设置2行 */
    grid-auto-flow: column; /* 核心：设置为列优先填充 */
}

原理说明 #

CSS Grid默认使用grid-auto-flow: row，会先填满一行再换行；而grid-auto-flow: column会让元素先填满一列，再依次填充下一列。结合grid-template-rows指定固定行数，3列会各分配2个元素，最终呈现你期望的排列顺序：

Alfa  Charlie Echo
Bravo Delta   Foxtrot

如果元素数量不固定，也可以用grid-auto-rows: 1fr替代固定的grid-template-rows，网格会自动根据元素数量生成足够的行，依然保持列优先填充逻辑。

完整示例代码 #

<ul>
    <li>Alfa</li>
    <li>Bravo</li>
    <li>Charlie</li>
    <li>Delta</li>
    <li>Echo</li>
    <li>Foxtrot</li>
</ul>

ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    list-style: none;
    padding: 0;
    gap: 1rem; /* 可选：添加元素间距优化视觉 */
}

li {
    padding: 0.5rem;
    border: 1px solid #e0e0e0;
}

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