The afternoon CSS Grid finally clicked

For weeks I fought flexbox for layouts that were never meant to be one-dimensional. Grid felt like spreadsheet cosplay until I saw a lesson demo with grid-template-columns: repeat(3, 1fr) and everything snapped into place.

The mental model

Think in tracks, not hacks:

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

Two lines replaced an entire afternoon of margin math. The gap property alone paid for the mental shift.

What I still get wrong

1. Implicit rows when content height varies
2. Naming areas before I need them
3. Forgetting minmax(0, 1fr) when children overflow

I am not a layout expert yet — but I stopped reaching for floats. That counts as progress.