title: How to skip one column using CSS grid?
body: <p><a href="https://i.stack.imgur.com/jj50T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jj50T.png" alt="Design for the grid system" /></a></p>
  <p>I need to keep the middle grid-item empty. I thought it would have been possible with the following property: <code>grid-template-areas</code></p>
  <pre><code>grid-template-areas:
    &quot;header . header&quot;
    &quot;main . .&quot;
    &quot;footer . footer&quot;;
  </code></pre>
  <p>But this unfortunately does not give the correct display.</p>
  <p>So I did it with 5 classes named item-a to item-e and then in css set the correct position in the grid. This however doesn't feel like a very efficient way to do it. Does any one know how to make it a more efficient?</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>.content-container {
      width: 51.5em;
      height: 30em;
      padding: 2.125em 1.5em;
      display: grid;
      grid-template-columns: 45% auto 45%;
      grid-template-rows: auto;
    }
  
    .item-a {
      grid-column: 1;
      grid-row: 1 / 3;
    }
  
    .item-b {
      grid-column: 3;
      grid-row: 1 / 3;
    }
  
    .item-c {
      grid-column: 1;
      grid-row: 2 / 3;
    }
  
    .item-d {
      grid-column: 1;
      grid-row: 3 / 3;
    }
  
    .item-e {
      grid-column: 3;
      grid-row: 3 / 3;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content-container"&gt;
    &lt;div class="item-a"&gt;
      &lt;label for="firstName" class="label"&gt;First Name&lt;/label&gt;
      &lt;input id="firstName" type="text" class="input" placeholder="Enter your first name"&gt;
    &lt;/div&gt;
    &lt;div class="item-b"&gt;
      &lt;label for="lastName" class="label"&gt;Last Name&lt;/label&gt;
      &lt;input id="lastName" type="text" class="input" placeholder="Enter your last name"&gt;
    &lt;/div&gt;
    &lt;div class="item-c"&gt;
      &lt;label for="email" class="label"&gt;Email&lt;/label&gt;
      &lt;input id="email" type="email" class="input" placeholder="Enter your email"&gt;
    &lt;/div&gt;
    &lt;div class="item-d"&gt;
      &lt;label for="password" class="label"&gt;Password&lt;/label&gt;
      &lt;input id="password" type="password" class="input" placeholder="Enter your password"&gt;
    &lt;/div&gt;
    &lt;div class="item-e"&gt;
      &lt;label for="passwordConfirmation" class="label"&gt;Confirm Password&lt;/label&gt;
      &lt;input id="passwordConfirmation" type="password" class="input" placeholder="Enter your password again"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>