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

CSS Flexbox and Grid are the two modern layout systems that have revolutionized web design. Both are powerful, both are widely supported, and choosing between them is one of the most common questions in frontend development. The short answer: Flexbox is for one-dimensional layouts (rows OR columns), Grid is for two-dimensional layouts (rows AND columns). But the real answer is more nuanced. Let's dive deep.

Flexbox: One-Dimensional Layout

Flexbox excels at distributing space along a single axis. It's perfect for navigation bars, card rows, centering content, and any layout where items flow in one direction.

Basic Flexbox

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

.item {
    flex: 1;          /* Equal width */
    flex: 0 0 200px;  /* Fixed width */
    flex: 1 1 auto;   /* Flexible */
}

Key Flexbox Properties

• flex-direction: row | column — sets the main axis
• justify-content: alignment along the main axis
• align-items: alignment along the cross axis
• flex-wrap: wrap | nowrap — allow items to wrap to new lines
• gap: space between items (modern replacement for margins)
• flex: shorthand for grow, shrink, and basis

Grid: Two-Dimensional Layout

CSS Grid controls both rows and columns simultaneously. It's ideal for page layouts, dashboards, image galleries, and any design where you need precise control over a two-dimensional grid.

Basic Grid

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 20px;
}

.header { grid-column: 1 / -1; }  /* Span full width */
.sidebar { grid-row: 2 / 3; }
.main { grid-column: 2 / 4; }

Key Grid Properties

• grid-template-columns/rows: define track sizes
• grid-template-areas: name regions for intuitive placement
• fr unit: fractional unit for flexible tracks
• repeat(): shorthand for repeating track patterns
• minmax(): set minimum and maximum track sizes
• auto-fill / auto-fit: responsive columns without media queries

Grid Template Areas

One of Grid's most powerful features — name your layout regions:

.container {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "sidebar main    main"
        "footer  footer  footer";
    grid-template-columns: 250px 1fr 1fr;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

When to Use Flexbox

1. Navigation bars: Horizontal menus with evenly-spaced or right-aligned items
2. Centering: Vertically and horizontally centering a single element
3. Card rows: A single row of equally-sized cards
4. Form layouts: Input + button combos, inline form elements
5. Media objects: Image + text side by side
6. Dynamic content: When the number of items is unknown and should flow naturally

When to Use Grid

1. Page layouts: Header, sidebar, main content, footer
2. Dashboards: Widgets of varying sizes in a structured grid
3. Image galleries: Masonry-like layouts with spanning items
4. Complex forms: Multi-column form layouts with aligned labels
5. Magazine layouts: Overlapping elements and asymmetric designs
6. Responsive without media queries: auto-fit + minmax()

Using Both Together

The best layouts often combine Grid and Flexbox. Use Grid for the overall page structure and Flexbox for component-level alignment:

/* Grid for page layout */
.page {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 60px 1fr 40px;
}

/* Flexbox for navbar items */
.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Flexbox for card content */
.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

Responsive Patterns

Auto-fit Grid (No Media Queries!)

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

This creates a responsive grid that automatically adjusts the number of columns based on available space. Items are at least 280px wide and expand to fill remaining space.

Flexbox Wrap

.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.flex-grid > * {
    flex: 1 1 280px;
    max-width: 400px;
}

Performance Considerations

Both Flexbox and Grid are highly optimized in modern browsers. However:

• Grid can be slightly faster for complex layouts because the browser calculates all positions in one pass
• Deeply nested Flexbox layouts can cause more reflow calculations
• In practice, the performance difference is negligible for most applications

Quick Reference

Need:                          Use:
─────────────────────────────  ──────
Center something               Flexbox
Navigation bar                 Flexbox
Single row/column of items     Flexbox
Page layout (header/sidebar)   Grid
Dashboard with widgets         Grid
Image gallery                  Grid
Responsive columns             Grid (auto-fit)
Unknown number of items        Flexbox (wrap)
Both rows AND columns matter   Grid

Conclusion

Flexbox and Grid aren't competing technologies — they're complementary. Grid handles the macro layout (page structure, sections), Flexbox handles the micro layout (component alignment, spacing). Master both, and you can build any layout without hacks, floats, or frustration.