CSS Grid空项问题：如何让列中对应项处于同一行？

你希望第二列的A/B/C项分别和第一列的A/B/C项处于同一行，但当前设置grid-column后出现了大量空白，原因是Grid布局会按照DOM元素的顺序依次分配行空间：前三个元素都被指定到列1，它们会占据第1、2、3行；后面的列2元素默认会从第4行开始排列，所以中间出现了空白。

要在明确指定列号的同时实现行对齐，有两种常用方案：

方案1：通过grid-row指定对应行号 #

直接给第二列的每个元素指定对应的行号，让它们和第一列的元素处于同一行：

.grid-container {
  display: grid;
  gap: 1rem;
}

.grid-item {
  background-color: skyblue;
}

.grid-column-1 {
  grid-column: 1;
}

.grid-column-2 {
  grid-column: 2;
}

/* 新增行号指定 */
.grid-row-1 {
  grid-row: 1;
}
.grid-row-2 {
  grid-row: 2;
}
.grid-row-3 {
  grid-row: 3;
}

修改HTML，给第二列元素添加对应的行类：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="./index.css" />
</head>
<body>
  <div>
    <div class="grid-container">
      <div class="grid-item grid-column-1">
        Column 1 A
      </div>
      <div class="grid-item grid-column-1">
        Column 1 B
      </div>
      <div class="grid-item grid-column-1">
        Column 1 C
      </div>
      <div class="grid-item grid-column-2 grid-row-1">
        Column 2 A
      </div>
      <div class="grid-item grid-column-2 grid-row-2">
        Column 2 B
      </div>
      <div class="grid-item grid-column-2 grid-row-3">
        Column 2 C
      </div>
    </div>
  </div>
</body>
</html>

方案2：调整DOM结构（无需额外行号设置） #

如果允许调整DOM结构，把同一行的两个元素放在一起，Grid会自动将它们分配到同一行的不同列：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="./index.css" />
</head>
<body>
  <div>
    <div class="grid-container">
      <div class="grid-item grid-column-1">
        Column 1 A
      </div>
      <div class="grid-item grid-column-2">
        Column 2 A
      </div>
      <div class="grid-item grid-column-1">
        Column 1 B
      </div>
      <div class="grid-item grid-column-2">
        Column 2 B
      </div>
      <div class="grid-item grid-column-1">
        Column 1 C
      </div>
      <div class="grid-item grid-column-2">
        Column 2 C
      </div>
    </div>
  </div>
</body>
</html>

这种方式不需要额外设置grid-row，Grid会按照元素顺序自动填充行，同时保持你指定的列位置。

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