如何实现CSS多列纵向排列且保持Flex式行对齐效果？

我现有如下Flex组件，外观符合预期，但内容是横向排列（先填满第一行，再第二行）：

原Flex布局代码 #

CSS #

ul {
  display: flex;
  flex-direction: row;
  gap: 8px 32px;
  flex-wrap: wrap;
}

li {
  flex-basis: calc(33% - 32px);
}

HTML #

<ul>
    <li>Toni and Dwight Beavers</li>
    <li>Debra Coleman</li>
    <li>Ashley Dwight</li>
    <li>Paul and Madeline Green</li>
    <li>Jon and Allison Kelly</li>
    <li>Samar and William Longjohnson</li>
    <li>J. May Liang and James Linament</li>
    <li>Timothy R. Landry</li>
    <li>Carrie and David Mason</li>
    <li>Luke Frazier and Robert Peters</li>
    <li>Mei Xu and Allessandro Reiner</li>
    <li>Jennifer and Jimmy Revesi</li>
    <li>Cinthia and Horacio Rozalyn</li>
    <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
    <li>Angela and Kyle Westberger</li>
    <li>Linda D. Rabbitt and John Wheaton</li>
    <li>Kathie and Mike Wiener</li>
    <li>Rochdi Young</li>
</ul>

客户要求改为纵向流动排列：每列内容按字母顺序从上到下排列，填满第一列后再填充第二列、第三列。

我尝试使用columns:3实现：

尝试多列布局代码 #

CSS #

ul {
  columns: 3
}

li {
  padding-bottom: 8px;
  padding-right: 32px
}

HTML #

<ul>
    <li>Toni and Dwight Beavers</li>
    <li>Debra Coleman</li>
    <li>Ashley Dwight</li>
    <li>Paul and Madeline Green</li>
    <li>Jon and Allison Kelly</li>
    <li>Samar and William Longjohnson</li>
    <li>J. May Liang and James Linament</li>
    <li>Timothy R. Landry</li>
    <li>Carrie and David Mason</li>
    <li>Luke Frazier and Robert Peters</li>
    <li>Mei Xu and Allessandro Reiner</li>
    <li>Jennifer and Jimmy Revesi</li>
    <li>Cinthia and Horacio Rozalyn</li>
    <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
    <li>Angela and Kyle Westberger</li>
    <li>Linda D. Rabbitt and John Wheaton</li>
    <li>Kathie and Mike Wiener</li>
    <li>Rochdi Young</li>
</ul>

这种方式实现了正确的纵向排列顺序，但元素无法像Flex布局那样保持水平对齐，也没有明确的行结构。

我希望同时实现两者：既保留Flex布局的网格对齐外观（列宽一致、元素对齐整齐），又实现纵向列流动效果（内容按列从上到下填充）。

解决方案：使用CSS Grid实现 #

通过CSS Grid的grid-auto-flow: column属性，可以完美兼顾纵向流动和网格对齐的需求：

CSS代码 #

ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定3列，每列宽度均等 */
  grid-auto-flow: column; /* 设置流动方向为列优先，先填满第一列再填下一列 */
  gap: 8px 32px; /* 保持原Flex的间距：行间距8px，列间距32px */
  height: fit-content; /* 容器高度自适应内容，避免多余空行 */
  margin: 0;
  padding: 0;
}

li {
  list-style: none; /* 可选，移除默认列表符号 */
}

HTML代码（和之前一致） #

<ul>
    <li>Toni and Dwight Beavers</li>
    <li>Debra Coleman</li>
    <li>Ashley Dwight</li>
    <li>Paul and Madeline Green</li>
    <li>Jon and Allison Kelly</li>
    <li>Samar and William Longjohnson</li>
    <li>J. May Liang and James Linament</li>
    <li>Timothy R. Landry</li>
    <li>Carrie and David Mason</li>
    <li>Luke Frazier and Robert Peters</li>
    <li>Mei Xu and Allessandro Reiner</li>
    <li>Jennifer and Jimmy Revesi</li>
    <li>Cinthia and Horacio Rozalyn</li>
    <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
    <li>Angela and Kyle Westberger</li>
    <li>Linda D. Rabbitt and John Wheaton</li>
    <li>Kathie and Mike Wiener</li>
    <li>Rochdi Young</li>
</ul>

效果说明 #

• grid-template-columns: repeat(3, 1fr)保证三列宽度完全一致，实现和Flex一样的网格对齐效果；
• grid-auto-flow: column让内容按列优先的顺序填充，先填满第一列的所有行，再依次填充第二、第三列，满足纵向流动的需求；
• gap属性直接复用原Flex的间距设置，保持外观一致；
• 容器高度自适应内容，不会出现多余的空白行，同时每个列表项的位置都在规整的网格单元格中，对齐整齐。

内容的提问来源于stack exchange，提问作者Erica Stockwell-Alpert