如何在响应式CSS Grid布局中保持Label与Input配对不分离？

问题背景 #

现有HTML结构如下（无法修改）：

<div>
  <span>Label 1</span>
  <span><input type="text" placeholder="label 1"></span>
  <span>Label 2</span>
  <span><input type="text" placeholder="label 2"></span>
  <span>Label 3</span>
  <span><input type="text" placeholder="label 3"></span>
</div>

原CSS使用Grid的auto-fill实现响应式，但在部分屏幕尺寸下会生成3列，导致Label与对应Input被拆分到不同行：

div {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

需求：仅允许显示4列（大屏幕）、2列（中屏幕）、1列（小屏幕），且保持Label与Input的配对，不能修改HTML结构。

解决方案 #

通过媒体查询明确指定列数，并利用Grid的grid-column和grid-row属性精确控制每个元素的位置，避免错位：

/* 小屏幕默认：1列布局，Label与Input各占一行 */
div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px; /* 可选，增加元素间距提升可读性 */
}

/* 中屏幕（≥600px）：2列布局，Label固定在第1列，Input固定在第2列，每组在同一行 */
@media (min-width: 600px) {
  div {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 奇数位的span是Label，统一放在第1列 */
  span:nth-child(odd) {
    grid-column: 1;
  }
  /* 偶数位的span是Input，统一放在第2列 */
  span:nth-child(even) {
    grid-column: 2;
  }
  /* 让每组Label和Input处于同一行 */
  span:nth-child(2n+1),
  span:nth-child(2n) {
    grid-row: calc((2n + 1)/2);
  }
}

/* 大屏幕（≥1200px）：4列布局，两组Label+Input并排显示 */
@media (min-width: 1200px) {
  div {
    grid-template-columns: repeat(4, 1fr);
  }
  /* 第1、5个Label放在第1列，对应Input在第2列 */
  span:nth-child(4n+1) {
    grid-column: 1;
    grid-row: calc(n + 1);
  }
  span:nth-child(4n+2) {
    grid-column: 2;
    grid-row: calc(n + 1);
  }
  /* 第3个Label放在第3列，对应Input在第4列 */
  span:nth-child(4n+3) {
    grid-column: 3;
    grid-row: calc(n + 1);
  }
  span:nth-child(4n+4) {
    grid-column: 4;
    grid-row: calc(n + 1);
  }
}

原理说明 #

1. 抛弃auto-fill的自动列数计算，改用媒体查询强制指定仅允许1、2、4列，从根源避免3列布局的出现。
2. 通过nth-child选择器精准定位每个Label和Input，利用grid-column固定它们的列位置，grid-row确保每组元素处于同一行，彻底解决错位问题。
3. 可根据实际需求调整媒体查询的断点值（如600px、1200px），适配不同设备尺寸。

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