带有输入字段的 CSS Grid：对齐问题

Question

我正在使用带有输入字段的 CSS Grid（12 列）。由于我创建表单的方式（表单设计采用 JSON 格式并动态创建），输入字段不是网格的直接子项，而是包含在 div 中。如果我对 div 执行 grid-column: span，我还希望输入字段跨越列 - 但不超过 grid-gap。我已经尝试了多种方法，最好的方法似乎是输入上的 width: 100% 但这忽略了网格间隙。关于如何让输入字段与 div 的宽度相同的任何想法？

对不起，如果我解释得不好 - 这是我的意思的截图：

这里是代码：

   .container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-gap: 20px;
        background-color: black;
      }

      .fill-width {
        width: 100%;
      }

      .width-4 {
        grid-column: span 4;
      }

<div class="container">
      <input id="field1" class="width-4" placeholder="field1 (4)" />
      <input id="field2" class="width-4" placeholder="field2 (4)" />
      <input id="field3" class="width-4" placeholder="field3 (4)" />

      <div class="width-4">
        <input id="field5" placeholder="field5 (4)" />
      </div>
      <input id="field6" class="width-4" placeholder="field6 (4)" />
      <input id="field7" class="width-4" placeholder="field7 (4)" />

      <div class="width-4">
        <input id="field1" class="fill-width" placeholder="field1 (4)" />
      </div>
      <div class="width-4">
        <input id="field2" class="fill-width" placeholder="field2 (4)" />
      </div>
      <div class="width-4">
        <input id="field3" class="fill-width" placeholder="field3 (4)" />
      </div>
    </div>

和 codepen 示例： https://codepen.io/ursus_the_bear/pen/mdRQNXM

Answer 1

你快到了。为确保输入不会溢出到网格间隙中，您可以查看 box-sizing 属性。但由于另一个答案已经证明了这一点，我将提供另一种方法。

您可以尝试使用 flexbox。我在container 类flex 父级中创建了div，然后将这些div 中的输入设为flex-grow of 1。这确保了flex 子级占用了flex 父级中的所有额外空间。为了确保输入不会溢出，我给了他们一个 100% 的max-width。我还删除了 fill-width 类的 width 声明：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-gap: 20px;
  background-color: black;
}

.width-4 {
  grid-column: span 4;
}


/* New styles */

.container div {
  display: flex;
  flex-flow: row nowrap;
}

.container div input {
  flex-grow: 1;
  max-width: 100%;
}

<div class="container">
  <input id="field1" class="width-4" placeholder="field1 (4)" />
  <input id="field2" class="width-4" placeholder="field2 (4)" />
  <input id="field3" class="width-4" placeholder="field3 (4)" />

  <div class="width-4">
    <input id="field5" placeholder="field5 (4)" />
  </div>
  <input id="field6" class="width-4" placeholder="field6 (4)" />
  <input id="field7" class="width-4" placeholder="field7 (4)" />

  <div class="width-4">
    <input id="field1" class="fill-width" placeholder="field1 (4)" />
  </div>
  <div class="width-4">
    <input id="field2" class="fill-width" placeholder="field2 (4)" />
  </div>
  <div class="width-4">
    <input id="field3" class="fill-width" placeholder="field3 (4)" />
  </div>
</div>

Answer 2

你做的没有错，但让我解释一下为什么会发生这种情况以及解决方案。

input 元素有一些浏览器添加的 CSS。像边框，最大宽度和东西。您需要摆脱这些，以便您的输入严格遵循您的样式表。

将此添加到 CSS 以使其像魅力一样工作：

* { /* all element selector */
  box-sizing: border-box; /* border, within the width of the element */
}
input {
  display: block;
  width: 100%
}   

如果* {box-sizing: border-box; } 对您来说是新的，您可以从输入中删除边距和边框以获得完美的结果。

 input {
  display: block;
  width: 100%;
  border: none;
  margin: 0;
}