grid-template-areas: named regions

Visual layout as ASCII

The most readable grid syntax in CSS:

.dashboard {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  min-height: 100vh;
}
.dashboard > header { grid-area: header; }
.dashboard > .sidebar { grid-area: sidebar; }
.dashboard > .main { grid-area: main; }
.dashboard > footer { grid-area: footer; }

The strings inside grid-template-areas are the layout WIRE-FRAME. Each name marks a region. Then assign each child to a region with grid-area.

Why this is unbeatable for layouts

• You can SEE the layout in the CSS.
• Reordering means moving names around — no math.
• Empty cell? Use . (a period).
• Same area on multiple lines? It spans.

grid-template-areas:
  "header header header"
  "sidebar main main"
  "sidebar . extras"          /* . = empty cell */
  "footer footer footer";

Responsive: just rewrite the areas

@media (max-width: 700px) {
  .dashboard {
    grid-template-columns: 1fr;        /* stack everything */
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
  }
}

The CHILD selectors don't change. You just describe a new wire-frame for the smaller screen.