How does CSS Grid work?

A grid container establishes explicit tracks with grid-template-columns and grid-template-rows. Items can be placed automatically, by line numbers, by named areas, or by spans. Extra items create implicit tracks if needed.

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

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

Core concepts

• fr distributes free space after fixed track sizes are resolved
• minmax(min, max) sets a track's size range
• repeat(auto-fit, ...) collapses empty tracks; auto-fill keeps them
• grid-template-areas names regions for readable placement
• grid-auto-rows and grid-auto-columns size implicit tracks
• gap spaces tracks without margins

Grid is layout-in: the container defines the structure and items are placed into it. Items can also overlap by occupying the same cells, which is useful for layered hero sections when done intentionally.