CSS Grid Finally Clicked for Me. Here's the Mental Shift That Did It.

For a long time I used flexbox for everything. Single-axis, multi-axis, complex card layouts that flexbox wasn't really designed for — I flexed my way through all of it because it clicked immediately when I learned it and Grid felt like learning a whole new system.

I was wrong to avoid it. Here's the mental shift that changed things.

The Wrong Way I Was Thinking About Grid

I was thinking about Grid the same way I thought about flexbox: here are some elements, how do I arrange them? In this mental model, Grid is just a more complicated flexbox.

That's not what Grid is.

The Mental Model That Works

Grid is about defining a space first and then placing items into it. You're not thinking "how do I arrange these elements?" You're thinking "what grid do I want, and then where does each element go in that grid?"

The practical difference: with flexbox, the elements define the layout. If you have five items in a row, the row is shaped by those five items. With Grid, you define the layout independently of the items. You say "I want a 12-column grid with specific row heights" and then you put things in it.

The Most Useful Grid Property I Ignored Forever

grid-template-areas is the property that made Grid click for me. Instead of thinking in terms of column/row numbers, you describe your layout with named regions:

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: 60px 1fr 40px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

You're looking at the layout in ASCII art in your CSS. This is immediately readable and makes responsive layout changes trivially easy — in a media query, you just redefine the template areas.

When Grid vs Flexbox

The practical rule I now use: Flexbox for one-dimensional layouts (a row of buttons, a navigation bar, a vertical list of items). Grid for two-dimensional layouts (a page structure, a card grid, anything where items need to align on both axes simultaneously).

Most of the "I'll use flexbox for this" decisions I made before learning Grid properly were things Grid would have done better in half the lines of CSS. The two systems aren't competing — they're complementary, and knowing when to reach for which one is a genuine skill.