title: CSS Grid with input fields: alignment question
body: <p>I am using CSS Grid (12 columns) with inputs fields. Due to the way I am creating the form (the form design is in JSON and created on the fly) the input fields are not the direct children of the grid but are wrapped in a div. If I do a <em>grid-column: span</em> of the div I also want the input field to span the columns - but not over the <em>grid-gap</em>. I have tried multiple ways of doing this and the best seems to be <em>width: 100%</em> on the input BUT this ignores the grid gap. Any idea as to how I can get the input field to be the same width as the div?</p>
  <p>Sorry if I explained it badly - here is a screenshot of what I mean:</p>
  <p><a href="https://i.stack.imgur.com/et5Kx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/et5Kx.png" alt="enter image description here" /></a></p>
  <p>here the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>   .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;
        }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
        &lt;input id="field1" class="width-4" placeholder="field1 (4)" /&gt;
        &lt;input id="field2" class="width-4" placeholder="field2 (4)" /&gt;
        &lt;input id="field3" class="width-4" placeholder="field3 (4)" /&gt;
  
        &lt;div class="width-4"&gt;
          &lt;input id="field5" placeholder="field5 (4)" /&gt;
        &lt;/div&gt;
        &lt;input id="field6" class="width-4" placeholder="field6 (4)" /&gt;
        &lt;input id="field7" class="width-4" placeholder="field7 (4)" /&gt;
  
        &lt;div class="width-4"&gt;
          &lt;input id="field1" class="fill-width" placeholder="field1 (4)" /&gt;
        &lt;/div&gt;
        &lt;div class="width-4"&gt;
          &lt;input id="field2" class="fill-width" placeholder="field2 (4)" /&gt;
        &lt;/div&gt;
        &lt;div class="width-4"&gt;
          &lt;input id="field3" class="fill-width" placeholder="field3 (4)" /&gt;
        &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>and the codepen example:
  <a href="https://codepen.io/ursus_the_bear/pen/mdRQNXM" rel="nofollow noreferrer">https://codepen.io/ursus_the_bear/pen/mdRQNXM</a></p>