Flexbox vs CSS Grid: When to Use Which Layout System

One of the most common questions in CSS development is: "Should I use Flexbox or Grid?" Both are powerful layout systems, and in many cases, either could work. But understanding their fundamental differences will help you choose the right tool for each situation and write cleaner, more maintainable CSS.

This guide breaks down the key differences, provides decision criteria, and shows real-world examples of when each system shines.

The Core Difference: One Dimension vs Two Dimensions

The fundamental distinction is simple:

• Flexbox is one-dimensional. It handles either a row or a column — not both simultaneously.
• Grid is two-dimensional. It controls both rows and columns at the same time.

This does not mean Flexbox cannot handle complex layouts. You can nest Flexbox containers to create two-dimensional structures. But the mental model is fundamentally different: Flexbox thinks in lines, Grid thinks in grids.

When to Use Flexbox

Flexbox excels at distributing space along a single axis. Use it when:

1. Navigation Bars

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

Navigation items naturally flow in a single row. Flexbox handles spacing, alignment, and wrapping perfectly.

2. Centering Content

.center-me {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Centering a single element both horizontally and vertically is one of Flexbox's simplest and most common use cases.

3. Card Content Alignment

.card {
  display: flex;
  flex-direction: column;
}

.card-content {
  flex: 1; /* Push footer to bottom */
}

.card-footer {
  margin-top: auto;
}

Use flex: 1 and margin-top: auto to push card footers to the bottom regardless of content height.

4. Form Layouts

.form-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.form-row label {
  flex: 0 0 120px;
}

.form-row input {
  flex: 1;
}

Inline form fields with labels, inputs, and buttons aligned on a single row are a natural Flexbox use case.

5. Media Object Pattern

.media {
  display: flex;
  gap: 16px;
}

.media-image {
  flex: 0 0 80px; /* Fixed size */
}

.media-body {
  flex: 1; /* Take remaining space */
}

The media object (icon/image + text) is the classic Flexbox pattern — a fixed element alongside flexible content.

When to Use CSS Grid

Grid excels at creating structured layouts where you need to control both dimensions. Use it when:

1. Page Layouts

.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  min-height: 100vh;
  gap: 16px;
}

Page-level layouts with header, sidebar, main content, and footer are Grid's bread and butter. The named areas make the structure immediately readable.

2. Card Grids and Galleries

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

Responsive card layouts that automatically adjust the number of columns based on screen width — without any media queries — are a Grid superpower.

3. Dashboard Layouts

.dashboard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto repeat(2, 1fr) auto;
  gap: 16px;
}

.chart-wide {
  grid-column: span 2;
}

.stat-tall {
  grid-row: span 2;
}

Dashboards with widgets of varying sizes that need to span multiple rows or columns are difficult with Flexbox but trivial with Grid.

4. Overlapping Elements

.hero {
  display: grid;
}

.hero-overlay {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}

.hero-image {
  grid-column: 1;
  grid-row: 1;
}

Grid items can overlap by being placed in the same cell. This is useful for hero sections, image overlays, and decorative elements.

5. Asymmetric Layouts

.feature-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
}

@media (max-width: 768px) {
  .feature-section {
    grid-template-columns: 1fr;
  }
}

Two-column layouts where one side is wider than the other, like feature sections or article layouts, are cleaner with Grid.

Quick Decision Flowchart

Ask yourself these questions in order:

1. Am I aligning items in a single row or column? → Flexbox
2. Do I need items to span multiple rows or columns? → Grid
3. Is this a component (card, nav, form) or a page layout? → Component = Flexbox, Page = Grid
4. Do I need a responsive grid that adjusts column count automatically? → Grid with auto-fit
5. Am I centering content? → Flexbox (simplest)
6. Do I need to control both rows and columns simultaneously? → Grid

The Golden Rule: Use Both Together

In practice, the best layouts use both systems. Grid handles the macro layout (page structure, grid of cards), and Flexbox handles the micro layout (content alignment within cards, navigation items within a header).

/* Grid for the page structure */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr 50px;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
}

/* Flexbox within the header */
.header {
  grid-area: header;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Flexbox within card components */
.card {
  display: flex;
  flex-direction: column;
}

.card-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

Comparison Table

• Dimensions: Flexbox = 1D, Grid = 2D
• Mental model: Flexbox = flow of items, Grid = table of cells
• Content-driven vs Layout-driven: Flexbox sizes items by content, Grid sizes items by container
• Wrapping: Flexbox wraps to next row, Grid fills cells in order
• Alignment: Both excellent, slightly different syntax
• Gap: Both support it
• Responsive: Grid has auto-fit/auto-fill advantage
• Nesting: Flexbox nests naturally, Grid nesting is more explicit

Frequently Asked Questions