如何让CSS Grid按字母序排列为2列4行分组布局？

问题背景 #

现有如下HTML结构：

<div class="grid-container">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  ...
  <div>z</div>
</div>

需要将其设置为2列布局，同时按4行一组呈现如下排列效果：

a | e
b | f
c | g
d | h
----- 
i | m
j | n

...

s | w
t | x
----- 
y |
z |

要求：无需将4个或8个元素分组到单独网格容器中，也可使用非div的实现方式。

当前尝试的问题 #

目前使用以下CSS仅实现了部分效果，但排列顺序不符合预期：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(4, auto);
}

.grid-container DIV:nth-child(8n) {
  padding-bottom: 10px;
}

上述代码呈现的错误效果：

a | b
c | d
e | f
g | h
-----
i | j

若添加grid-auto-flow: column;，则会在元素溢出时新增列，忽略已定义的2列设置。

解决方案 #

可以通过CSS Grid的grid-row/grid-column属性结合:nth-child()伪类精准定位每个元素的位置，同时实现分组间隔。

最终CSS代码 #

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 0 10px; /* 列之间的横向间距 */
}

/* 定位每组元素的行位置：每组8个元素，前4个和后4个对应同一行 */
.grid-container > div:nth-child(8n + 1),
.grid-container > div:nth-child(8n + 5) {
  grid-row: 1;
}
.grid-container > div:nth-child(8n + 2),
.grid-container > div:nth-child(8n + 6) {
  grid-row: 2;
}
.grid-container > div:nth-child(8n + 3),
.grid-container > div:nth-child(8n + 7) {
  grid-row: 3;
}
.grid-container > div:nth-child(8n + 4),
.grid-container > div:nth-child(8n + 8) {
  grid-row: 4;
}

/* 分配列位置：每组前4个元素在第一列，后4个在第二列 */
.grid-container > div:nth-child(8n + 1),
.grid-container > div:nth-child(8n + 2),
.grid-container > div:nth-child(8n + 3),
.grid-container > div:nth-child(8n + 4) {
  grid-column: 1;
}
.grid-container > div:nth-child(8n + 5),
.grid-container > div:nth-child(8n + 6),
.grid-container > div:nth-child(8n + 7),
.grid-container > div:nth-child(8n + 8) {
  grid-column: 2;
}

/* 给每组最后一个元素添加底部间距，实现分组分隔 */
.grid-container > div:nth-child(8n) {
  margin-bottom: 10px;
}

/* 处理末尾不足8个元素的情况（比如y、z），避免错位 */
.grid-container > div:nth-last-child(2):nth-child(8n + 1),
.grid-container > div:nth-last-child(1):nth-child(8n + 2) {
  grid-column: 1;
  grid-row: auto;
}

原理说明 #

1. 利用8n + x的伪类规律：每组包含8个元素（4行×2列），通过该选择器定位每个元素在网格中的行和列位置
2. 前4个元素固定在第一列，对应行1-4；后4个元素固定在第二列，对应行1-4，实现交叉排列
3. 通过margin-bottom给每组最后一个元素添加间距，模拟分组分隔线
4. 针对末尾不足8个的元素，重置其行/列属性，避免布局错位

非div替代方案 #

如果使用<ul>+<li>结构，只需将CSS中的div替换为li即可，逻辑完全一致：

<ul class="grid-container">
  <li>a</li>
  <li>b</li>
  ...
  <li>z</li>
</ul>

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  gap: 0 10px;
  list-style: none;
  padding: 0;
}

/* 其余选择器将div替换为li即可 */
.grid-container > li:nth-child(8n + 1),
.grid-container > li:nth-child(8n + 5) {
  grid-row: 1;
}
/* ... 其余规则同理 */

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