如何學習 CSS Flexbox 和 Grid，並停止猜測該用哪一種

For about two years my approach to CSS layout was trial and error. I'd type display: flex, add justify-content: center, watch nothing happen, swap it for align-items: center, and keep toggling properties in DevTools until the box landed roughly where I wanted. It worked, sort of. I just couldn't have told you why.

What fixed it wasn't another cheat sheet. It was learning a few ideas properly, in the right order, and then reviewing them until they stopped leaking out of my head. Here's the order I'd follow if I were starting again.

Learn the one idea that explains Flexbox

Flexbox has a main axis and a cross axis. That's most of it.

flex-direction sets the main axis. By default it's row, so the main axis runs left to right. justify-content moves items along the main axis. align-items moves them along the cross axis.

.toolbar {
  display: flex;
  justify-content: space-between; /* along the row */
  align-items: center;            /* up and down */
}

The reason I kept mixing up justify-content and align-items is that I'd memorized them as "horizontal" and "vertical". That's only true for rows. Switch to flex-direction: column and they swap. Once I stopped thinking in left/right and started thinking in main/cross, the guessing mostly stopped.

Then learn what flex: 1 actually means

The second thing that confused me was sizing. flex: 1 is shorthand for three properties:

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0%;
}

flex-basis is the starting size. flex-grow says how much of the leftover space an item takes. flex-shrink says how much it gives up when space runs out. If you've ever had an item refuse to shrink below its text, the fix is usually min-width: 0, because flex items default to min-width: auto. That one line has saved me more time than anything else in this post.

Grid is for two directions at once

Here's the rule I use now, and it's simple enough to remember. Flexbox is for laying things out in one direction, a row or a column. Grid is for rows and columns together.

A nav bar, a row of buttons, a card's header with a title on the left and an icon on the right: Flexbox. A page layout with a sidebar, header and main area, or a gallery where cards should line up in both directions: Grid.

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}

That one declaration gives you a responsive gallery with no media queries. I'd suggest learning fr, repeat(), minmax() and gap before anything else in Grid. Named grid areas are nice too, and they read almost like a picture of the layout:

.page {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-areas:
    "header header"
    "sidebar main";
}

You can skip subgrid, grid-auto-flow: dense and explicit line numbering until a real layout asks for them.

Practice on things you'd actually build

Games help. Flexbox Froggy and Grid Garden are free and take an evening each. They're good for the first pass, but I forgot most of what I learned from them within a few weeks because I never used it on anything real.

What worked better was rebuilding layouts from sites I use. Pick a page, open it in DevTools with the layout overlays turned on (both Chrome and Firefox show Flexbox and Grid overlays), and try to recreate one section from scratch without looking at their CSS. Then compare. Doing this with five or six sections taught me more than the games did.

Josh Comeau's interactive guides on Flexbox and Grid are also worth reading once you've struggled a bit. They make far more sense after you've hit the problems they explain.

The part nobody talks about: forgetting it

My real problem wasn't understanding. I'd watch a good video on minmax(), get it completely, and three weeks later be back to guessing because I hadn't touched a grid since. CSS layout is a thing you use in bursts, so it fades between projects.

So I started reviewing. I keep a short list of the ideas that tripped me up (main vs cross axis, min-width: 0, auto-fill vs auto-fit, when to reach for Grid) and look at it again after a day, then a few days, then a couple of weeks. That's spaced repetition, and it's boring, and it works.

I ended up building Recl partly because of this. You share a video, article, reel or podcast to it, it writes a summary of the key points, files it under a topic like "CSS", and brings it back for review on a spaced repetition schedule. If you'd rather not use an app, a plain notes file you reread on a calendar reminder gets you most of the way there. What matters is seeing it again before it's gone.

A one-week plan

If you want something concrete:

1. Day one: Flexbox Froggy, then rebuild a nav bar with Flexbox.
2. Day two: build a card with a header, body and footer using flex-direction: column, and make the footer stick to the bottom.
3. Day three: Grid Garden, then make a responsive gallery with repeat(auto-fill, minmax(...)).
4. Day four: build a sidebar layout with grid-template-areas.
5. Day five: rebuild one section of a real site you like, with DevTools overlays on.
6. Weekend: write down the three things that confused you most, and review them next week.

You'll still open DevTools and fiddle. Everyone does. But you'll know which property you're fiddling with and why it moves things the way it does.

I build Recl, an AI learning app that saves your videos, reels, podcasts and articles, summarizes them, sorts them into topics, and uses spaced repetition so you remember what you learned.