The Mental Model That Finally Made CSS Grid Click

I avoided CSS Grid for far too long, reaching for flexbox even when grid was the obvious tool. The blocker was conceptual, not technical.

Think in tracks, not items

Flexbox is content-first: items push the container around. Grid is layout-first: you define the structure, then place content into it. Once that clicked, everything else followed.

The two lines that matter most

grid-template-columns and gap will get you through the vast majority of layouts. Add minmax() and auto-fit and you've got responsive grids with no media queries at all.

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

Learn the mental model and the syntax stops being scary.