← All guides

CSS Grid vs Flexbox: Which Should You Use?

One-dimensional vs two-dimensional layout, when each wins, and why you'll usually use both.

The core distinction: 1D vs 2D

This is the one fact that resolves most Grid-vs-Flexbox confusion: Flexbox lays items out along one axis (a row, or a column) and Grid lays items out along two axes at once (rows and columns together). Everything else follows from that.

Flexbox items can wrap onto a new line, but each line is still laid out independently — Flexbox doesn't align items across multiple lines into a shared grid. Grid does exactly that by design.

When Grid wins

• Overall page or section layout — header, sidebar, main content, footer — where you want precise control over both rows and columns at once.
• Content that needs to align across both axes, like a photo gallery or dashboard where cards in different rows should line up into clean columns.
• Overlapping elements — Grid supports placing items in the same cell, which Flexbox has no native concept of.
• Named, readable layouts via grid-template-areas, where you can describe a layout as literal region names instead of column/row math.

When Flexbox wins

• Aligning items within a component — a nav bar, a button group, a card's icon-plus-text row — anywhere content flows in a single direction.
• Distributing space along one axis — justify-content: space-between and friends are Flexbox's core strength.
• Content whose size is unknown or dynamic, where items should grow/shrink to fill available space (flex-grow/flex-shrink) rather than sit in fixed tracks.
• Wrapping tag/chip lists, where items should just flow and wrap naturally without a rigid column structure.

Using them together (the normal pattern)

In real projects, Grid and Flexbox aren't competitors — they're usually nested. A common pattern: Grid defines the page's macro layout (the overall sections), and Flexbox handles alignment inside each grid cell (centering a card's content, spacing out a button row). Reaching for one to solve every layout problem, instead of picking the right tool per level, is the most common real-world mistake.

Common mistakes

• Using flex-wrap to fake a grid when the items need to align into actual columns — this looks fine until item widths vary slightly and rows stop lining up. That's when it's time to switch to Grid with repeat(auto-fit, minmax(...)).
• Margin-hacking for spacing instead of using gap, which both Grid and Flexbox support natively and which doesn't require compensating for an extra margin on the last item.
• Reaching for Grid for a simple one-direction row that Flexbox would handle with far less code.