New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
I default to nested flexboxes for everything, then fight margin hacks to line things up that Grid would handle directly.
What you'll have at the end
A layout built with the right tool on the first try, with a one-line note on why (one axis or two)
You need
A layout with more than one row or column of similarly sized items, at least one row of which wraps onto a new line, whether it's already built in Flexbox or still a sketch on paper.
Not covered
Picking the exact Grid track-sizing function or Flexbox growth value once the tool is chosen; this recipe stops at deciding which system to reach for.
Leans on
Build a full-page shell with header, sidebar, main and footer using grid-template-areas
when the two-axis need is a whole-page shell rather than a repeating card row, that recipe builds the named-area grid directly instead of running this decision first.
Align card headers and footers across a row with subgrid
once Grid is the chosen tool, subgrid is the next problem: aligning content inside each card, a layer deeper than the cards' own alignment.
Checked 20 Aug 2026
Part of the CSS Grid Layout cookbook