CSS Grid Settings Page 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.

.settings {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 16px;
  grid-template-areas:
    "heading"
    "sections"
    "panel"
    "savebar";
}

.settings > .heading { grid-area: heading; }
.settings > .sections { grid-area: sections; }
.settings > .panel { grid-area: panel; }
.settings > .savebar { grid-area: savebar; }

@media (min-width: 880px) {
  .settings {
    grid-template-columns: 220px minmax(0, 640px);
    grid-template-rows: auto 1fr auto;
    gap: 32px;
    grid-template-areas:
      "heading  heading"
      "sections panel"
      "sections savebar";
  }
}