基于CSS Grid的响应式表单布局实现方案问询

我想创建一个表单布局，列数要根据可用宽度和动态添加的表单项数量自动调整，而且表单项没有统一的最小/最大宽度。每个表单项需要包含标题，并且要保持垂直对齐——因为对齐要求，没法在容器用Flexbox。我试了CSS Grid布局但没找到理想方案，这种响应式布局能用纯CSS实现吗？还是必须借助JavaScript？

以下是我测试的代码示例，但存在不足，比如minmax里的200px是经验值：

<div class="grid-container">
  <div class="grid-item">
    <div class="caption">Caption 1:</div>
    <input type="text">
  </div>
  <div class="grid-item">
    <div class="caption">Caption 2:</div>
    <input type="text">
  </div>
  <div class="grid-item">
    <div class="caption">This is a very long caption</div>
    <input type="text" style="width: 150px;">
  </div>
  <div class="grid-item">
    <div class="caption">Caption 4:</div>
    <input type="text" style="width: 250px;">
  </div>
  <div class="grid-item">
    <div class="caption">Caption 5:</div>
    <input type="text" style="width: 200px;">
  </div>
  <div class="grid-item">
    <div class="caption">Last caption</div>
    <input type="text" style="width: 180px;">
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 200px)); /* 灵活列数 */
  gap: 10px; /* 表单项间距 */
  align-items: start; /* 垂直顶部对齐 */
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
}

.grid-item > * {
  display: block;
  width: 100%; /* 输入框拉伸填满容器 */
}

完全可以用纯CSS Grid实现，不需要JavaScript。核心是调整网格列规则，让列宽自适应内容同时根据容器宽度自动换行，替代硬编码的固定值。

核心调整： #

1. 修改网格列模板：将grid-template-columns改为repeat(auto-fit, minmax(min-content, 1fr))。min-content确保列不会窄于内容的最小宽度，1fr让多余空间自动分配给各列，彻底摆脱经验值依赖。
2. 保护表单项最小宽度：给.grid-item添加min-width: min-content，防止表单项被压缩到内容无法完整显示。
3. 保留垂直对齐：继续使用align-items: start保证所有表单项顶部对齐。如果不需要输入框强制拉伸填满列宽，可以去掉.grid-item > *中的width: 100%，让输入框保持自身设置的宽度。

修改后的完整CSS代码： #

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
  gap: 10px;
  align-items: start;
}

.grid-item {
  background-color: #f0f0f0;
  padding: 20px;
  border: 1px solid #ccc;
  min-width: min-content;
}

.grid-item > * {
  display: block;
  /* 如需输入框保持自定义宽度，去掉下面的width:100% */
  /* width: 100%; */
}

效果说明： #

• 布局会自动根据容器宽度和每个表单项的内容宽度动态调整列数，添加新表单项时也会自动适配。
• 所有表单项的标题和输入框保持垂直对齐，无需JavaScript介入。

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