带有 CSS 网格的响应式表单布局

Question

我正在尝试创建一个表单布局，其列数取决于可用宽度和需要添加的项目数（项目数也是动态的，没有共同的最小或最大宽度）。

我想要的表单结构如下图所示。项目可以有标题，并且都需要垂直对齐。由于对齐要求，Flexbox不能用在容器上。

我一直在尝试网格布局，但我根本找不到正确的解决方案。 有没有办法实现响应式网格布局还是需要使用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)); /* Flexible number of columns */
      gap: 10px; /* Gap between grid items */
      align-items: start; /* Align items vertically at the start */
    }

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

    .grid-item > * {
      display: block;
      width: 100%; /* Make inputs stretch to fill the entire space */
    }

Answer 1

在

display: flex

上使用

.grid-item

，然后设置

justify-content: space-between

。这将负责跨列的输入字段的垂直对齐。您担心的似乎是当视口宽度减小时减少列数。您的代码可以处理该问题，但某些视口大小除外，其中网格不会换行并且容器会溢出视口的右边界。为此，您可以使用

@media

CSS 规则为不同的视口宽度创建自定义网格布局：

/* Customized grid layout for phones having a screen width of 560px or lower */
@media only screen and (max-width: 35em) {
    /* customize your grid layout and/or other elements here */
}

使用此规则，您可以使元素根据视口宽度更改其样式。