如何让CSS Grid按列优先排列？基于列数与动态项数配置

当然可以实现列优先填充的效果，你只需要在现有Grid类的基础上添加grid-auto-flow-col类即可，完整的类组合为：

<div class="grid grid-cols-4 gap-4 grid-auto-flow-col">
  <!-- 从API获取的网格项 -->
</div>

为什么之前的尝试可能没生效？ #

默认的grid-auto-flow是row（行优先），添加grid-auto-flow-col后会将流动方向改为column（列优先），此时网格项会先填满第一列的所有行，再依次填充第二、第三、第四列。

如果你的网格项有固定高度，容器会自动扩展行数来容纳内容；如果项高度不固定，Grid也会根据内容自动调整每行高度，保证列优先的排列顺序。

补充说明 #

如果需要让每列的项数尽可能均匀分配（比如9个项时4列分别为3、2、2、2），单纯靠Grid的自动流无法实现，这种情况需要通过JavaScript计算每列应分配的项数，再手动分组渲染到不同的列容器中。

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