CSS Flexbox vs Grid: When to Use Which

Flexbox and Grid Overview

CSS Flexbox and CSS Grid are both layout systems built into every modern browser. They solve related but different problems, and knowing when to reach for each one will save you hours of fighting with your layouts.

Flexbox arrived first (2012 in its final spec form) and handles one-dimensional layouts — arranging items along a single row or a single column. Grid landed later (2017 across all major browsers) and handles two-dimensional layouts — rows and columns simultaneously.

The short answer: use Flexbox when your layout flows in one direction, use Grid when you need to control both rows and columns at the same time. But real-world decisions are rarely that clean, so let's dig into the specifics.

When to Use Flexbox

Flexbox excels at distributing space along a single axis. It is the right choice for:

• Navigation bars: A row of links that need to spread evenly or cluster at the ends. display: flex; justify-content: space-between; handles this in two lines.
• Button groups: A row of buttons with consistent spacing. gap (now supported in Flexbox too) makes this trivial.
• Centering anything: Vertical and horizontal centering is solved with display: flex; align-items: center; justify-content: center;.
• Card rows that wrap: A set of cards that flow left to right and wrap to the next line. flex-wrap: wrap; handles this naturally.
• Sidebars with flexible main content: A fixed-width sidebar next to a flex: 1 main area works well in Flexbox.

Flexbox is content-driven. Items size themselves based on their content, and Flexbox distributes leftover space according to your flex-grow and flex-shrink settings.

When to Use Grid

Grid shines when you need to define the overall structure of a page or component with precise row and column control:

• Page-level layout: Header, sidebar, main, footer arranged in a defined grid. grid-template-areas makes this readable and maintainable.
• Photo galleries: Equal-sized cells in a grid. grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); creates a responsive gallery in one line.
• Dashboard layouts: Widgets of different sizes placed into a defined grid. Grid's span syntax lets certain widgets take up 2 columns or 2 rows.
• Form layouts: Labels and inputs aligned in a two-column grid. Grid keeps everything aligned without wrapper elements.
• Magazine-style layouts: Overlapping elements, items spanning multiple rows — Grid's explicit placement handles these with ease.

Grid is container-driven. You define the grid structure on the parent, and items are placed into that structure. This is a fundamental difference from Flexbox's content-driven approach.

Practical Comparison

Responsive Card Layout

Both Flexbox and Grid can create a responsive card grid, but they approach it differently:

Flexbox approach:

.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card { flex: 1 1 300px; }

Cards grow to fill available space. The last row might have cards wider than the rest if there are fewer items.

Grid approach:

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }

All cards are the same width. The grid maintains consistent column sizing regardless of how many items are in the last row.

For most card layouts, Grid produces better results because of consistent sizing.

Centering Content

Both work equally well. Flexbox: display: flex; place-items: center;. Grid: display: grid; place-items: center;. Grid is slightly shorter but Flexbox is more widely known for this pattern.

Combining Both

The best layouts use both. Grid handles the macro layout (page structure) while Flexbox handles the micro layout (component internals).

A typical pattern: the page uses CSS Grid for header/sidebar/main/footer placement. Inside the header, Flexbox arranges the logo and navigation. Inside the main content, Grid creates a card gallery. Inside each card, Flexbox arranges the card's internal content vertically.

There is no rule that says you must choose one. They compose naturally. A grid item can also be a flex container, and vice versa.

Browser Support and Tips

Both Flexbox and Grid are supported in all modern browsers. The global support for Flexbox is over 99% and Grid is over 97% (with the gap property in Flexbox at around 95%).

• Use gap instead of margins for spacing in both Flexbox and Grid. It is cleaner and avoids the "extra margin on edges" problem.
• Learn minmax() for Grid — it eliminates most media queries for responsive grids.
• Use grid-template-areas for page layouts — the visual ASCII-art syntax makes the layout readable at a glance.
• Avoid setting explicit widths on flex items when possible. Use flex-basis and let the browser calculate.

Build and experiment with Flexbox layouts using our Flexbox Generator. Adjust properties visually and copy the generated CSS directly into your project.