CSS Grid Finally Clicked — Here Is What Made It Make Sense

I avoided CSS Grid for months after it shipped. I was comfortable with flexbox. Flexbox did what I needed. Grid felt like something I'd need eventually but not today.

Then I built a dashboard with twelve panels at various sizes and spent three days making flexbox do something it was never designed to do. On day four I stopped, opened the MDN Grid guide, and read it properly.

It clicked in an afternoon. Here is what made it make sense.

The mental model that was blocking me

I was trying to learn Grid by analogy to flexbox. Both are layout systems. Flexbox lays things out in one dimension — a row or a column. So I thought Grid was just flexbox for two dimensions at once.

That framing is technically correct and practically useless. It made Grid feel like flexbox with extra syntax for doing the same thing.

The shift: Grid is not about arranging items. It is about defining a space and placing items into it.

Flexbox is item-driven — you style the children and they negotiate positions with each other. Grid is container-driven — you define the structure on the parent, then place children into named or indexed positions.

Once I understood that the structure lives on the container, the rest followed logically.

The one property that unlocks it

grid-template-areas:
  "header header header"
  "sidebar main main"
  "footer footer footer";

grid-template-areas is where Grid became obvious for me. You draw the layout in ASCII art. You name zones. You assign children to zones with grid-area. The browser fills it in.

This is higher-level than I expected CSS to be. You describe what you want, not how to achieve it.

Why flexbox is still right for some things

Grid being powerful doesn't make flexbox obsolete. They solve different problems.

Flexbox: you have a set of items and want them to flow naturally, wrapping when they run out of space, with some control over alignment. Nav bars, button groups, card grids where you don't care exactly which column something lands in.

Grid: you have a defined layout and want precise control over placement. Dashboards, full-page layouts, anything where items need to align across both axes simultaneously or occupy specific named regions.

The tell: if you're thinking about the layout, use Grid. If you're thinking about the items, use flexbox.

What I built after

The dashboard I'd been struggling with took about forty minutes to rebuild with Grid. Twelve panels, precisely placed, responsive at two breakpoints using grid-template-areas variants inside media queries.

I had been trying to solve a two-dimensional problem with a one-dimensional tool. The problem wasn't my flexbox skills — it was the tool choice.

That lesson generalizes. When something feels harder than it should, it's worth asking whether the problem is the implementation or the approach.