CSS Flexbox vs Grid: When to Use Each (With Examples)

Modern CSS layout comes down to two tools: Flexbox and Grid. Both are fully supported in every modern browser, both are powerful, and beginners often use one where the other would be half the code. Here's how to choose.

The one-line rule

• Flexbox lays things out in one dimension: a row or a column.
• Grid lays things out in two dimensions: rows and columns together.

A second way to think about it: Flexbox works content-out (items decide their size, and the container distributes space), while Grid works layout-in (you define the structure, and items slot into it).

Flexbox: great for components

Use Flexbox for navigation bars, button groups, centering, card internals and any row of items that should wrap or share space.

.navbar {
  display: flex;
  align-items: center;          /* vertical alignment in a row */
  justify-content: space-between; /* spread items along the row */
  gap: 1rem;
}

The properties you'll use constantly:

Property	What it does
flex-direction	row (default) or column
justify-content	Alignment along the main axis
align-items	Alignment along the cross axis
gap	Space between items
flex-wrap	Allow items to wrap onto new lines
flex: 1	"Take up the remaining space"

The famous centering problem is now two lines:

.center {
  display: flex;
  place-items: center; /* or justify-content + align-items: center */
}

A very common pattern, "sidebar fixed, content flexible":

.layout { display: flex; }
.sidebar { flex: 0 0 260px; }  /* don't grow, don't shrink, 260px */
.content { flex: 1; min-width: 0; } /* fill the rest */

That min-width: 0 prevents long content (like code blocks) from overflowing. It's one of the most useful lines in CSS.

Grid: great for page layouts and galleries

Use Grid when you care about rows and columns lining up: page structures, dashboards, card galleries, forms with labels and inputs aligned.

.page {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh;
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

Named areas make the layout readable at a glance, and rearranging it for mobile is just a new grid-template-areas inside a media query.

The responsive card grid, no media queries

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

Cards are at least 260px wide and as many fit per row as the screen allows. It goes from one column on phones to four or more on wide screens with zero breakpoints. Few lines of CSS are this useful. (auto-fit is a close cousin: it stretches items when there are fewer than fit a row.)

Side by side

Situation	Use
Navbar, toolbar, button row	Flexbox
Centering one thing	Either (Flexbox or place-items on Grid)
Card internals (icon, text, button)	Flexbox
Gallery of equal cards	Grid
Whole page layout	Grid
Form with aligned labels and inputs	Grid
Items of unknown count that should wrap	Flexbox with flex-wrap, or Grid with auto-fill
Aligning content across separate cards	Grid with subgrid

They work best together

You don't pick one for a whole project. A typical page uses Grid for the overall layout and the card gallery, and Flexbox inside each card and in the header. Nesting them is normal.

Subgrid is worth knowing too: a nested grid can inherit its parent's tracks, so titles and buttons line up across a row of cards even when their content lengths differ. It's supported in all modern browsers now.

Common mistakes

• Using margins for spacing between items. Use gap in both Flexbox and Grid; it's cleaner and avoids extra space on the edges.
• Fixed heights everywhere. Let content define height; use min-height when you need a floor.
• Fighting overflow. Add min-width: 0 to flex or grid children that contain long text or code.
• Reaching for absolute positioning to build layouts. It breaks responsiveness. Layout belongs to Flexbox and Grid.

Both feed directly into good responsive design: mobile-first responsive web design.

FAQ

Should I use Flexbox or Grid?

Use Flexbox for one-dimensional layouts like rows of items, and Grid for two-dimensional layouts like page structures and galleries. Most real projects use both together.

Is CSS Grid better than Flexbox?

Neither is better. They solve different problems. Grid excels at structured, aligned layouts; Flexbox excels at distributing space among items in a line.

Can I use Grid and Flexbox together?

Yes, and you should. A common pattern is Grid for the page and gallery layout, with Flexbox inside individual components.