Named grid areas

Named areas make page-level layouts easy to read:

.page {
  display: grid;
  grid-template-columns: 16rem 1fr;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.site-header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: main; }
.site-footer { grid-area: footer; }

Every quoted row must have the same number of cells. Repeating a name creates one rectangular area. A dot marks an empty cell.

Start from a one-column template that matches the document order, then redefine only the visual map when space permits:

.page {
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "sidebar"
    "footer";
}

@media (min-width: 48rem) {
  .page {
    grid-template-columns: minmax(12rem, 1fr) 3fr;
    grid-template-areas:
      "header header"
      "sidebar main"
      "footer footer";
  }
}

Areas change visual placement but not reading, focus, or accessibility-tree order. Preserve HTML that makes sense without Grid, even if a wide layout displays the sidebar first.

Use the Grid overlay to display area names. Intentionally make a non-rectangular area or misspell one assignment and inspect how the browser rejects or auto-places the result.