CSS Grid Advanced Patterns: Build Any Layout With Grid Template Areas

.layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar main    main  "
    "sidebar footer  footer";
  grid-template-columns: 250px 1fr 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }
/* Responsive: just redefine areas in media query */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "main"
      "sidebar"
      "footer";
    grid-template-columns: 1fr;
  }
}

/* auto-fill: creates as many tracks as fit at min-width */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 24px;
}
/* At 800px wide: 3 cards. At 500px wide: 2 cards. At 300px: 1 card */
/* Zero media queries needed! */

/* auto-fit vs auto-fill: */
/* auto-fill: empty tracks remain (keeps columns even if fewer items) */
/* auto-fit: collapses empty tracks (items stretch to fill) */
.stretch-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}

/* minmax(min, max): track is at least min, at most max */
.layout {
  grid-template-columns:
    [sidebar-start] 250px [sidebar-end main-start] 1fr [main-end];
  grid-template-rows:
    [header-start] 60px [header-end] 1fr [footer-start] 50px [footer-end];
}
/* Place by name */
.content {
  grid-column: main-start / main-end;
  grid-row: header-end / footer-start;
}

/* Parent defines grid, children align to it */
.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.card {
  /* Card spans all 3 columns */
  grid-column: 1 / -1;
  display: grid;
  /* Inherit parent's column tracks */
  grid-template-columns: subgrid;
}
/* Now card's children align to parent grid! */