CSS Grid vs Flexbox: When to Use Which

The Mental Model: 2D vs 1D

Flexbox lays out items along a single axis. You get a row (or a column), and you control how items distribute along it: spacing, alignment, wrapping, order. It's brilliant at "a bunch of things in a line, spaced nicely." It has opinions about the cross axis too (alignment), but the layout happens in one dimension.

Grid lays out items in two dimensions simultaneously. You define rows and columns — an actual grid — and place items into cells, spanning as needed. It's brilliant at "this thing goes exactly here, that thing spans these two columns."

The one-sentence decision rule: if you're thinking in rows AND columns, use Grid. If you're thinking in a row OR a column, use Flexbox.

"But Flexbox wraps into multiple rows!" Yes — and each wrapped row is still laid out as its own one-dimensional line. Flexbox never aligns items across wrapped rows into columns. That limitation is exactly what Grid exists for. If you need items in row 2 to line up under items in row 1, that's Grid territory.

Three Layouts Where Grid Wins

1. The classic page layout. Header spanning full width, sidebar + main content, footer spanning full width. In Grid, this is literally a drawing of the page: define two columns and three rows, place four items. The code reads like the design. In Flexbox, this needs nested containers and careful sizing — doable, but you're fighting the tool.

2. The card gallery with aligned rows. Twelve product cards in a responsive grid where every card's title, price, and button line up across rows. Grid's `grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))` gives you a responsive gallery in one line, and items align in both dimensions automatically. Flexbox wraps cards into rows, but cards in different rows don't align vertically — a card with a longer title pushes its row's height independently, and the columns go ragged.

3. Overlapping elements. A headline overlapping a hero image, a badge positioned over a card corner, a caption layered on a photo. Grid lets multiple items occupy the same cell (`grid-area: 1/1` for both), creating clean overlaps without absolute positioning's fragility. Flexbox simply has no concept of "put these two things in the same slot."

Grid's killer features in one list: explicit two-dimensional placement, `gap` that works in both directions, named areas (`grid-template-areas` lets you draw the layout in ASCII art), and alignment control per-axis.

Three Layouts Where Flexbox Wins

1. The navigation bar. Logo left, links center or right, a button at the end. `display: flex; justify-content: space-between; align-items: center;` — three declarations, done. Grid can do this, but it's like using a spreadsheet to write a sentence. Flexbox's content-aware distribution (items size to their content, space distributes automatically) is exactly what nav bars need.

2. Centering anything. The single most common layout task in CSS history. Flexbox: `display: flex; align-items: center; justify-content: center;`. Done in 2009's dreams, reality since 2015. Grid can center too (`place-items: center`), and honestly it's a tie — but Flexbox got here first and the muscle memory is universal.

3. Form rows and button groups. A label next to an input, a row of buttons with equal spacing, an input with a button attached (the classic search bar). These are one-dimensional distribution problems: items in a line, spaced and aligned. Flexbox's `gap` property (now supported everywhere) handles the spacing without margin hacks, and `flex: 1` on the input makes it fill available space while the button stays content-sized.

Flexbox's killer features: content-driven sizing, effortless distribution along one axis (`space-between`, `space-around`, `space-evenly`), item reordering without touching HTML, and wrapping behavior for responsive lines of content.

They Compose: The Pattern Professionals Use

Here's what ends the debate: real layouts use both, nested. Grid for the page skeleton, Flexbox inside each region.

A typical professional layout:

• Grid defines the page: header / sidebar / main / footer areas.
• Flexbox lays out the header's contents: logo, nav links, user menu in a row.
• Flexbox lays out the sidebar's contents: a vertical stack of nav items.
• Grid lays out the main content: a card gallery in rows and columns.
• Flexbox lays out each card's internals: title, description, and a price-plus-button row.

Neither tool does the whole page alone. Grid handles the macro layout (where the regions go); Flexbox handles the micro layout (how content flows inside each region). Once you see this pattern, you'll spot it in every well-built site.

The CSS Flexbox Interactive Visual Layout Playground is the fastest way to build the Flexbox half of this intuition — toggle the properties and watch items redistribute live. For Grid, browser dev tools now have excellent grid overlays (Firefox's is still the best) — inspect any grid layout and turn on the overlay to see the tracks.

The Cheat Sheet

• Page skeleton, galleries, dashboards, magazines, overlaps → Grid
• Nav bars, centering, form rows, button groups, media objects → Flexbox
• "Items must align in columns across rows" → Grid, always
• "Items in a line, spaced nicely" → Flexbox, always
• Whole page → Grid outside, Flexbox inside
• Unsure → Sketch the layout. If you drew rows AND columns, Grid. If you drew a line, Flexbox.

One more practical note: `gap` works in both now, so the old "Flexbox needs margin hacks" complaint is dead. And Grid's `subgrid` (now supported in all modern browsers) solves the old "nested grids can't align with parent tracks" problem — worth learning once you're comfortable with basic Grid.

The Mistakes Beginners Make

A few errors show up in nearly every beginner's Grid/Flexbox code:

• Grid for a nav bar. Defining columns for "logo, links, button" works, but the moment link text changes length, the rigid tracks fight you. Flexbox's content-aware distribution handles this effortlessly — use the one-dimensional tool for the one-dimensional job.
• Flexbox for a card gallery. Wrapping flex rows look like a grid until cards have different content heights — then the columns go ragged and nothing aligns across rows. If vertical alignment across rows matters, it's Grid. No exceptions.
• Forgetting `gap`. Both Grid and Flexbox support `gap` now, which puts space between items without margins on the outer edges. The old `:not(:last-child)` margin hacks are dead — if your CSS still has them, delete them.
• Nesting when one container would do. A flex row inside a flex row inside a flex row to achieve what one grid with named areas does in five lines. When the nesting gets three deep, step back and ask whether Grid describes the layout more directly.
• Ignoring the implicit grid. Grid auto-places items you don't explicitly position, which is convenient — until an item lands somewhere surprising. For complex layouts, explicit placement (`grid-column`, `grid-row`, or named areas) beats hoping auto-placement guesses right.

Try This Now

Take the last layout you built and audit it: is there a Flexbox doing two-dimensional work (nested wrappers fighting for column alignment)? Is there a Grid doing one-dimensional work (a single row defined as a grid)? Convert one of each. The code gets shorter every time, and that's how you know the mental model is working.