能否用CSS Grid替代Flex实现右侧列组的堆叠布局？

需求说明 #

• 大屏（≥500px）布局：左右两组标签值对并排，左侧有3组、右侧有2组时，前两行左右各一组，第三行仅显示左侧组：

  Left Label 1 | Left Value 1 | Right Label 1 | Right Value 1
  Left Label 2 | Left Value 2 | Right Label 2 | Right Value 2
  Left Label 3 | Left Value 3

• 小屏布局：右侧组整体排在左侧组之后，每组标签值垂直堆叠：

  Left Label 1 | Left Value 1
  Left Label 2 | Left Value 2
  Left Label 3 | Left Value 3
  Right Label 1 | Right Value 1
  Right Label 2 | Right Value 2

当前问题 #

使用CSS Grid默认布局时，大屏下内容会按「左到右、上到下」的顺序填充，导致布局不符合预期：

Left Label 1 | Left Value 1 | Left Label 2 | Left Value 2
Left Label 3 | Left Value 3 | Right Label 1 | Right Value 1
Right Label 2 | Right Value 2

解决方案 #

通过grid-auto-flow: dense让Grid自动填充空白行，同时给右侧元素指定固定列位置，即可实现预期的大屏布局，且无需硬编码行数。

修改后的代码 #

CSS

.responsiveGrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px;
}

/* 大屏适配 */
@media (min-width: 500px) {
  .responsiveGrid {
    grid-template-columns: auto 1fr auto 1fr;
    grid-auto-flow: dense; /* 自动填充空白单元格 */
  }
  /* 右侧标签固定在第3列 */
  .right.label {
    grid-column: 3;
  }
  /* 右侧值固定在第4列 */
  .right.value {
    grid-column: 4;
  }
}

.label {
  background-color: yellow;
}

.value {
  background-color: orange;
}

HTML（无需修改）

<div class="responsiveGrid">
  <span class="label left">Left Label 1</span>
  <span class="value left">Left Value 1</span>

  <span class="label left">Left Label 2</span>
  <span class="value left">
    Left Value 2
    A really long value to see some wrapping.
    A really long value to see some wrapping.
    A really long value to see some wrapping.
    A really long value to see some wrapping.
  </span>

  <span class="label left">Left Label 3 Which is Longer</span>
  <span class="value left">Left Value 3</span>

  <span class="label right">Right Label 1</span>
  <span class="value right">Right Value 1</span>

  <span class="label right">Right Label 2</span>
  <span class="value right">Right Value 2</span>
</div>

原理说明 #

1. grid-auto-flow: dense会让Grid布局引擎自动寻找并填充空白的单元格，避免右侧元素被挤到左侧组的下方。
2. 通过grid-column给右侧的标签和值分别指定第3、4列，确保它们始终出现在大屏布局的右侧区域。
3. 小屏模式下保持原有2列布局，右侧组自然排在左侧组之后，无需额外调整。

补充说明 #

如果后续左侧或右侧的组数发生变化，该方案无需修改CSS，Grid会自动适配行数，保持左右组的行对齐关系。

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