带输入字段的CSS网格：对齐问题

Question

我正在使用CSS网格（12列）与输入字段。由于我创建表单的方式（表单设计是在JSON中创建的，并且是动态创建的），输入字段不是网格的直接子字段，而是包装在DIV中。如果我对div执行一个grid-column：span，我还希望输入字段跨越列，但不是跨越网格间隙。我已经尝试了多种方法来做到这一点，最好的似乎是宽度：100%的输入，但这忽略了网格间隙。我想知道如何让输入字段与div的宽度相同吗？

抱歉，如果我解释得不好--这里是我的意思的截图：

代码如下：

null

   .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>

null

和代码页示例：https://codepen.io/ursus_the_bear/pen/mdrqnxm

Answer 1

你没有做错，但让我解释为什么会发生这种情况和解决办法。

输入元素有一些浏览器添加的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;
}