7. CSS Grid — two-dimensional layout

.page {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100dvh;
}
header { grid-area: header; }  aside { grid-area: sidebar; }  main { grid-area: main; }  footer { grid-area: footer; }

/* Responsive card grid with no media queries */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }