Aligning form labels in a CSS grid?

Question

I am working on learning using a grid with a form and stuck on getting my form working correctly within it. Most of it is ok until I get to checkboxes whereupon the labels get out of alignment. I want the labels for those to be to the right of the checkboxes, unlike the labels for everything else which is on the left. Instead, the labels are getting bumped to the next row.

Here is my code:

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
  font-family: "Lato", sans-serif;
  color: #fafafa;
}

form {
  display: grid;
  grid-template-columns: 1fr 1em 2fr;
  border-radius: 12px;
  padding: 1em;
  background: #009688;
  margin: 2rem auto 0 auto;
  max-width: 600px;
}

form input {
  background: #fff;
  border: 1px solid #9c9c9c;
}

form button {
  background: lightgrey;
  padding: 0.7em;
  width: 100%;
  border: 0;
}

form button:hover {
  background: gold;
}

label {
  padding: 0.5em 0.5em 0.5em 0;
}

input {
  padding: 0.7em;
  margin-bottom: 0.5rem;
}

input:focus {
  outline: 3px solid gold;
}

@media (min-width: 400px) {
  form {
    grid-gap: 16px;
  }
  label {
    text-align: right;
    grid-column: 1 / 3;
  }
  input[type="checkbox"] {
    grid-column: 3 / 3;
    justify-self: start;
    margin: 0;
  }
  input,
  button {
    grid-column: 3 / 4;
  }
  textarea+label {
    align-self: start;
  }
}

<form class="form1" action="">
  <label for="firstName" class="first-name">First Name</label>
  <input id="firstName" type="text">

  <label for="lastName" class="last-name">Last Name</label>
  <input id="lastName" type="text">

  <label for="email">Email</label>
  <input id="email" type="text">
  <label for="experience">Experience</label>
  <select id="experience" name="experience">
    <option value="1">Less than a year</option>
    <option value="2">1 - 2 years</option>
    <option value="3">3 - 5 years</option>
    <option value="5">5 years or more</option>
  </select>

  <input id="bootcamp" name="bootcamp" type="checkbox" />
  <label for="bootcamp">Bootcamp</label>

  <input id="tech" name="tech" type="checkbox" />
  <label for="tech">Tech School</label>

  <input id="college" name="college" type="checkbox" />
  <label for="college">College</label>

  <textarea id="comments" name="comments" rows="5" cols="20"></textarea>
  <label for="comments">Comments</label>

  <button>Submit</button>
</form>

Answer 1

Adjust your HTML code to always keep the structure (label then input). You can also simplify your grid by having ony 2 columns and consider a gap:

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");
body {
  font-family: "Lato", sans-serif;
  color: #fafafa;
}

form {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-gap: 1em;
  border-radius: 12px;
  padding: 1em;
  background: #009688;
  margin: 2rem auto 0 auto;
  max-width: 600px;
  align-items: center;
}

form input {
  background: #fff;
  border: 1px solid #9c9c9c;
}

form button {
  background: lightgrey;
  padding: 0.7em;
  width: 100%;
  border: 0;
}

form button:hover {
  background: gold;
}

label {
  padding: 0.5em 0.5em 0.5em 0;
}

input {
  padding: 0.7em;
  margin-bottom: 0.5rem;
}

input:focus {
  outline: 3px solid gold;
}

select {
  height: 100%;
}

@media (min-width: 400px) {
  form {
    grid-gap: 16px;
  }
  label {
    text-align: right;
    grid-column: 1;
  }
  input[type="checkbox"] {
    justify-self: start;
    margin: 0;
  }
  input,
  button {
    grid-column: 2;
  }
  textarea+label {
    align-self: start;
  }
}

<form class="form1" action="">
  <label for="firstName" class="first-name">First Name</label>
  <input id="firstName" type="text">

  <label for="lastName" class="last-name">Last Name</label>
  <input id="lastName" type="text">

  <label for="email">Email</label>
  <input id="email" type="text">
  <label for="experience">Experience</label>
  <select id="experience" name="experience">
    <option value="1">Less than a year</option>
    <option value="2">1 - 2 years</option>
    <option value="3">3 - 5 years</option>
    <option value="5">5 years or more</option>
  </select>

  <label for="bootcamp">Bootcamp</label>
  <input id="bootcamp" name="bootcamp" type="checkbox">

  <label for="tech">Tech School</label>
  <input id="tech" name="tech" type="checkbox">


  <label for="college">College</label>
  <input id="college" name="college" type="checkbox">

  <label for="comments">Comments</label>
  <textarea id="comments" name="comments" rows="5" cols="20"></textarea>

  <button>Submit</button>
</form>