How to skip one column using CSS grid?

Question

I need to keep the middle grid-item empty. I thought it would have been possible with the following property: grid-template-areas

grid-template-areas:
  "header . header"
  "main . ."
  "footer . footer";

But this unfortunately does not give the correct display.

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?

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

<div class="content-container">
  <div class="item-a">
    <label for="firstName" class="label">First Name</label>
    <input id="firstName" type="text" class="input" placeholder="Enter your first name">
  </div>
  <div class="item-b">
    <label for="lastName" class="label">Last Name</label>
    <input id="lastName" type="text" class="input" placeholder="Enter your last name">
  </div>
  <div class="item-c">
    <label for="email" class="label">Email</label>
    <input id="email" type="email" class="input" placeholder="Enter your email">
  </div>
  <div class="item-d">
    <label for="password" class="label">Password</label>
    <input id="password" type="password" class="input" placeholder="Enter your password">
  </div>
  <div class="item-e">
    <label for="passwordConfirmation" class="label">Confirm Password</label>
    <input id="passwordConfirmation" type="password" class="input" placeholder="Enter your password again">
  </div>
</div>

Answer 1

You don't need all that code, you can simplify like below:

.content-container {
  max-width: 51.5em;
  height: 20em;
  padding: 2.125em 1.5em;
  display: grid;
  grid-template-columns: 1fr 1fr; /* define only 2 columns*/
  column-gap: 4em; /* control the gap between both columns*/
  border:1px solid;
}

.item-d {
  grid-column: 1; /* move the passwer to the first column instead of the second one*/
}

input {
  display: block;
  width:100%;
  box-sizing:border-box;
}

<div class="content-container">
  <div>
    <label for="firstName" class="label">First Name</label>
    <input id="firstName" type="text" class="input" placeholder="Enter your first name">
  </div>
  <div>
    <label for="lastName" class="label">Last Name</label>
    <input id="lastName" type="text" class="input" placeholder="Enter your last name">
  </div>
  <div>
    <label for="email" class="label">Email</label>
    <input id="email" type="email" class="input" placeholder="Enter your email">
  </div>
  <div class="item-d">
    <label for="password" class="label">Password</label>
    <input id="password" type="password" class="input" placeholder="Enter your password">
  </div>
  <div>
    <label for="passwordConfirmation" class="label">Confirm Password</label>
    <input id="passwordConfirmation" type="password" class="input" placeholder="Enter your password again">
  </div>
</div>

Another simplification:

.content-container {
  max-width: 51.5em;
  height: 20em;
  padding: 2.125em 1.5em;
  display: grid;
  column-gap: 4em;
  border:1px solid;
}

.content-container :nth-child(2) {
  grid-column: 2;
  grid-row:span 2;
}

input {
  display: block;
  width:100%;
  box-sizing:border-box;
}

<div class="content-container">
  <div>
    <label for="firstName" class="label">First Name</label>
    <input id="firstName" type="text" class="input" placeholder="Enter your first name">
  </div>
  <div>
    <label for="lastName" class="label">Last Name</label>
    <input id="lastName" type="text" class="input" placeholder="Enter your last name">
  </div>
  <div>
    <label for="email" class="label">Email</label>
    <input id="email" type="email" class="input" placeholder="Enter your email">
  </div>
  <div >
    <label for="password" class="label">Password</label>
    <input id="password" type="password" class="input" placeholder="Enter your password">
  </div>
  <div>
    <label for="passwordConfirmation" class="label">Confirm Password</label>
    <input id="passwordConfirmation" type="password" class="input" placeholder="Enter your password again">
  </div>
</div>