CSS Grid Form Layout Generator

Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.

.form {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto auto;
  gap: 16px;
  grid-template-areas:
    "first"
    "last"
    "email"
    "city"
    "postcode";
}

.form > .first { grid-area: first; }
.form > .last { grid-area: last; }
.form > .email { grid-area: email; }
.form > .city { grid-area: city; }
.form > .postcode { grid-area: postcode; }

@media (min-width: 640px) {
  .form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 20px;
    grid-template-areas:
      "first last"
      "email email"
      "city  postcode";
  }
}