能否通过CSS Grid实现行列转置排列？无需手动定义行数

嘿，这个需求完全可以用CSS Grid轻松实现，而且不需要手动定义行数（或者说只需要基于你原本的列数来设置，不用根据元素总数算行数）。我给你两种实用的方案，都能达到你要的排列效果：

方案一：利用grid-auto-flow: column实现转置布局 #

这是最简洁的方法，核心思路是把网格的流动方向从默认的「行优先」改成「列优先」，同时把原本的列数设置为行数，让列自动生成：

ul {
  border: 3px solid goldenrod;
  display: grid;
  /* 把原本的3列转换成3行，和你原布局的列数对应 */
  grid-template-rows: repeat(3, 50px);
  /* 自动生成列，每列宽度均分 */
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  grid-gap: 10px;
  /* 关键：让元素按列方向流动，先填满第一行的所有列，再第二行 */
  grid-auto-flow: column;
}

li {
  background: pink;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  line-height: 50px;
}

这样设置后，15个元素会自动排列成3行5列，每行的元素正好是你要的「1、4、7、10、13」「2、5、8、11、14」「3、6、9、12、15」，完全符合你的需求。而且如果后续元素数量变化（比如变成12个），列数会自动调整，不用修改行数设置。

如果你想让列数可以灵活调整，还可以用CSS变量来统一管理，后续只需要修改变量值即可：

:root {
  /* 定义你想要的列数，后续只改这里就行 */
  --grid-cols: 3;
}

ul {
  border: 3px solid goldenrod;
  display: grid;
  grid-template-rows: repeat(var(--grid-cols), 50px);
  grid-auto-columns: 1fr;
  margin: 0;
  padding: 0;
  grid-gap: 10px;
  grid-auto-flow: column;
}

li {
  background: pink;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  line-height: 50px;
}

方案二：利用nth-child指定元素的行位置 #

如果你更倾向于保持网格的行优先流动逻辑，也可以通过给每个元素指定行位置来实现：

ul {
  border: 3px solid goldenrod;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-rows: 50px;
  margin: 0;
  padding: 0;
  grid-gap: 10px;
  grid-auto-flow: column;
}

li {
  background: pink;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  line-height: 50px;
}

/* 第1、4、7...个元素放在第1行 */
li:nth-child(3n + 1) {
  grid-row: 1;
}

/* 第2、5、8...个元素放在第2行 */
li:nth-child(3n + 2) {
  grid-row: 2;
}

/* 第3、6、9...个元素放在第3行 */
li:nth-child(3n + 3) {
  grid-row: 3;
}

这个方法的原理是通过nth-child选择器把元素按3个一组分配到对应的行，然后网格会自动生成列来容纳这些元素，最终效果和方案一完全一致。

内容的提问来源于stack exchange，提问作者Mr. CC