Understand

Grid can define an entire page structure.

grid-template-areas lets you name regions and place items by name, making complex layouts readable. Combined with auto-fit and minmax(), grids become responsive without media queries.

Analogy: Named grid areas are like a floor plan labelling each room's place.

See It in Action

A responsive auto-fitting grid:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Try It Yourself

1. Use repeat(auto-fit, minmax(...)) for a card grid.
2. Resize and watch columns adjust.
3. Try naming areas with grid-template-areas.

Challenge

Build a card layout that changes its column count automatically as the screen resizes.

Success condition: Your grid adds or removes columns as the window resizes, without media queries.