The one-line rule that ends most arguments
If you are distributing items along a single axis—a row of chips, a vertical stack of cards, a toolbar—reach for Flexbox first. If you are defining rows and columns at once—a dashboard, a photo gallery, a form label/value grid—Grid is the cleaner mental model. Mixed layouts are normal: Grid for the page skeleton, Flexbox inside each cell for alignment quirks.
Play with spacing live in our CSS Flexbox Playground when you are arguing about `align-items` at standup, then hop to the CSS Grid Builder when someone says “just make it twelve columns.” Seeing tracks and gaps beats whiteboard arrows.
When a designer insists on pixel-perfect gutters, Grid template columns beat flex percentage hacks that drift when users zoom text.
Patterns we reach for weekly
Navigation bars, button groups, media objects with uneven copy: Flexbox, because wrapping and `gap` solve ninety percent of it. Holy grail sidebars used to be a meme; now Grid’s `grid-template-areas` makes intent obvious to the next developer.
Honestly, the mistake we still see is Grid for a single row of tags because someone copied a tutorial template. It works until localization doubles label length and everything overflows weirdly. Flexbox wrapping would have been boring and correct.
Old float layouts still haunt codebases—we migrate page shells to Grid first, then flex insides during refactors, not in one risky Friday PR.
Responsive without spaghetti
Grid shines when breakpoints change structure—not just scale fonts. `auto-fit` and `minmax()` turn “three cards desktop, one card mobile” into declarative code instead of twelve media queries fighting floats. Flexbox still handles the card innards: push the CTA to the bottom with `margin-top: auto` on a flex column.
When designers hand us Figma frames with both strict columns and loose stacks, we sketch the Grid template first, then flex inside components. Debate time drops. So does the “why is this div 4000px tall” Slack thread.
Subgrid is increasingly viable for card interiors that align with parent tracks; check support for your audience before you bet the farm on bleeding-edge syntax.
Team conventions that stuck
Page regions: Grid. Components: Flex unless two-dimensional. Never float for layout in new code. Use `gap`, not margin hacks, when both support it for the audience you target.
We link both playgrounds in onboarding docs so juniors experiment before opening a PR. Layout arguments become screenshots with toggled properties, not opinion duels. Ship the page; pick the tool that matches the axis.
We save playground URLs in PR descriptions so reviewers click instead of debating abstract alignment theory for twenty comments.