CSS Flexbox vs Grid: Which Layout Method Should You Use?

CSS Flexbox and CSS Grid are both two-dimensional layout systems built into every modern browser. Both replace the hacks of the float era. But they approach layout from different directions, and knowing which to reach for — and when to use both together — is one of the most valuable skills in front-end development. Experiment with both in our CSS editor online with a live preview as you read.

What Flexbox Is For

Flexbox is a one-dimensional layout model. It arranges items along a single axis — either a row or a column — and handles how those items grow, shrink, and align within that axis. It excels at:

• Navigation bars and button groups (horizontal row of items)
• Centering a single element both vertically and horizontally
• Distributing space between items in a row with justify-content: space-between
• Sidebar + main content layouts (two or three columns that don't need a full grid)
• Card components — aligning the card's internal content (image, title, button) vertically

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

/* Centre anything */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

What CSS Grid Is For

CSS Grid is a two-dimensional layout model. It controls placement across both rows and columns simultaneously. It excels at:

• Full page layouts (header, sidebar, main, footer all defined in one rule)
• Card grids where you want consistent columns regardless of card content
• Complex layouts where items span multiple rows AND columns
• Magazine-style editorial layouts
• Any layout where the design exists on a grid and you need items to align both horizontally and vertically with each other

.page-layout {
  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;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

The Key Difference

The clearest mental model: Flexbox works outward from the content — items take the space they need, and leftover space is distributed. Grid works inward from the container — you define the tracks first, then place content into them.

Another way to think about it: if you are laying out items in a line, use Flexbox. If you are laying out a whole section or page with defined rows and columns, use Grid.

When to Use Flexbox

• The layout is primarily in one direction (row or column)
• You want items to wrap naturally to new lines (like tags or chips)
• You are working at the component level — the internal layout of a card, a form, a toolbar
• Spacing between items should be dynamic based on available space

When to Use CSS Grid

• You need precise control over both rows and columns
• Items in different rows need to align with each other (true grid alignment)
• You are defining a page-level or section-level layout
• The layout is driven by the design, not by the content

Using Both Together (The Right Answer)

In practice, the best layouts use both. Grid defines the macro layout — the page skeleton. Flexbox handles the micro layout — how content is arranged within each grid cell. A common pattern:

/* Grid for the page structure */
.page {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}

/* Flexbox for the nav inside the header */
.header-nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Flexbox for the internal layout of each card */
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

There is no rule that says you must choose. A page-level Grid with Flexbox component interiors is not a compromise — it is the standard pattern in modern front-end development. After designing your layout, use the HTML color codes guide to apply a consistent colour scheme to your components.

Browser Support

Both Flexbox and CSS Grid have full support in all browsers released after 2017. There is no reason to avoid either for public websites. The one exception is legacy email clients (Outlook on Windows), which support neither — HTML email still requires table-based layout.