Flexbox is for one dimension: a row, or a column. The moment you need rows and columns to line up together, you’re fighting it. Grid is for two dimensions, and these four patterns cover almost everything you’ll build. Copy them and stop re-Googling.
auto-fit and minmax
The responsive card grid, with zero media queries:
.cards {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}auto-fit packs in as many columns as fit; minmax(240px, 1fr) says each column is at least 240px and grows to share the leftover space. Resize the window and the cards reflow on their own. One rule replaces three breakpoints.
Template areas for layout
For a page skeleton — header, sidebar, main, footer — named areas beat counting column numbers. You draw the layout in the grid-template-areas string, then give each child a grid-area name. It’s self-documenting: anyone reading the CSS sees the shape. And rearranging for mobile is one line — rewrite the areas string inside a media query and the children follow.
Subgrid aligns card internals
Here’s the one people miss. In a row of cards, each with a title, body, and button, the buttons don’t line up because every card sizes itself. subgrid fixes it: the card inherits the parent grid’s rows, so titles, bodies, and footers align across the whole row. Set grid-template-rows: subgrid on the card and span the rows it should share. It’s in every modern browser now.
When flex still wins
Grid isn’t always the answer. Reach for flexbox when the content should decide the size, not a track: a row of tags that wrap, a toolbar of buttons, a nav where items hug their labels. Rule of thumb — if you’re placing items into a defined structure, use grid; if you’re distributing items along a line, use flex. Most real pages use both: grid for the page, flex inside the pieces.