网格项垂直排序失效，如何实现指定的网格布局？

当前网格布局效果：

1 2 3
4 5

需要实现的目标布局：

1 3 5
2 4

网格项数量不固定，可能包含n个列表项。设置grid-auto-flow: column;后，所有项都排成一行，网格布局失效，求解决方法。

相关代码 #

CSS #

.link-list-grid {
  display: grid;
  gap: 10px;
}

.link-list-grid-1 {
  grid-template-columns: repeat(1, 1fr);
}

.link-list-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.link-list-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.standardTextImage .content ul.linklist li a {
  color: #08107B;
}

.standardTextImage .content ul.linklist li a:hover {
  color: #0787c5;
}

.standardTextImage .content ul.linklist li a:hover i {
  color: #0787c5;
}

@media (max-width: 768px) {
  .link-list-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}

HTML #

<ul data-number-columns="3" class="linklist link-list-grid link-list-grid-3">
  <li>
    <a href="http://google.com" title="" target="_blank">1<i class="icon icon-angle-right"></i></a>
  </li>
  <li>
    <a href="http://google.de" title="" target="_blank">2<i class="icon icon-angle-right"></i></a>
  </li>
  <li>
    <a href="http://google.com" title="" target="_blank">3<i class="icon icon-angle-right"></i></a>
  </li>
  <li>
    <a href="http://google.com" title="" target="_blank">4<i class="icon icon-angle-right"></i></a>
  </li>
  <li>
    <a href="http://examplecom.de" title="" target="_blank">5<i class="icon icon-angle-right"></i></a>
  </li>
</ul>

解决方案 #

问题核心是：你只定义了列数，未限制行数，导致grid-auto-flow: column触发后，网格会无限创建列来容纳所有项，最终挤成一行。要实现列优先排列，需定义行数，让网格按列填充后自动换行到下一列。

修改3列布局的CSS类 #

.link-list-grid-3 {
  /* 移除原列数定义，改为设置行数规则 */
  grid-template-rows: repeat(auto-fill, minmax(auto, 1fr));
  grid-auto-flow: column;
  /* 自动创建的列宽度平分空间 */
  grid-auto-columns: 1fr;
}

如果需要固定行数（比如最多2行），可以直接写死行数：

.link-list-grid-3 {
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

适配响应式布局 #

移动端保持1列行优先，需重置相关属性：

@media (max-width: 768px) {
  .link-list-grid {
    grid-template-rows: none;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-flow: row;
  }
}

原理说明 #

• grid-auto-flow: column：指定网格项按列的方向依次填充
• grid-template-rows：定义每行高度，auto-fill会自动生成足够行数，避免列无限扩展
• grid-auto-columns: 1fr：让自动创建的列平分可用宽度

这样不管网格项数量多少，都会按列优先的规则排列，超出行数的项自动转到下一列。

内容的提问来源于stack exchange，提问作者D'arganatan