如何让内容适配CSS Grid列宽？实现同行输入框适配网格布局

需求：使用CSS Grid布局，实现三个表单模块横向排列，每个模块的label位于输入框上方，所有输入框（包括第二个模块的两个输入框）处于同一水平行，且宽度适配所在网格列。

现有代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  grid-gap: 4px;
}

HTML #

<div class="grid">
  <div class="one">
    <label for="aaa">aaa</label>
    <input type="text" name="cheese" />
  </div>

  <div class="two">
    <label for="bbb">bbb</label>
    <input type="text" name="cheese" />
    <span>~</span>
    <input type="text" name="cheese" />
  </div>
  <div class="three">
    <label for="ccc">ccc</label>
    <input type="text" name="cheese" />
  </div>
</div>

修改后的代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3个等宽网格列 */
  grid-gap: 16px;
}

.grid > div {
  display: flex;
  flex-direction: column;
  gap: 6px; /* label与输入区的间距 */
}

/* 处理双输入框组 */
.input-pair {
  display: flex;
  align-items: center;
  gap: 6px;
}

.input-pair input {
  flex: 1; /* 输入框平分当前列宽度 */
}

/* 统一输入框样式 */
.grid input {
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  border: 1px solid #ddd;
}

HTML #

<div class="grid">
  <div class="one">
    <label for="aaa">aaa</label>
    <input type="text" name="cheese" id="aaa" />
  </div>

  <div class="two">
    <label for="bbb">bbb</label>
    <div class="input-pair">
      <input type="text" name="cheese" id="bbb" />
      <span>~</span>
      <input type="text" name="cheese" />
    </div>
  </div>

  <div class="three">
    <label for="ccc">ccc</label>
    <input type="text" name="cheese" id="ccc" />
  </div>
</div>

关键说明 #

• 用repeat(3, 1fr)定义网格列，确保三个模块均分容器宽度；
• 每个网格子项采用垂直Flex布局，保证label在输入区上方；
• 双输入框通过Flex容器实现同行排列，且输入框自动填充列内可用空间；
• 统一输入盒模型，避免宽度溢出，确保所有输入框对齐一致。

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