Grid vs Flexbox - Same Layout, Two Ways

📚 When to Use Grid vs Flexbox

📐 Use CSS Grid When...

You need BOTH rows AND columns (2D)
Creating overall page layout
Dashboard or complex grid structures
Overlapping elements
You want to place items exactly where you want

📏 Use Flexbox When...

You need ONE direction only (row OR column)
Navigation bars
Centering items
Distributing space between items
Content that wraps to next line

💡 Rule of thumb: Grid for PAGE LAYOUT (2D), Flexbox for COMPONENTS (1D). You can (and should) use both together!

1. Card Grid (3+ cards in a row)

Flexbox Way

Card 1

Card 2

Card 3

Card 4

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

Grid Way

Card 1

Card 2

Card 3

Card 4

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

✅ Both work well! Flexbox is simpler for basic card rows. Grid is better if you need exact column control.

2. Navigation Bar (space-between)

Flexbox Way (Natural)

.flex-nav ul {
display: flex;
justify-content: space-between;
}

Grid Way (Less Natural)

.grid-nav ul {
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: space-between;
}

🏆 Flexbox wins! Navigation bars are naturally 1-dimensional (a single row). Flexbox is simpler and more intuitive.

3. Holy Grail Layout (Header, Sidebar, Main, Footer)

Flexbox Way (Complicated)

Header

Main Content

.flex-holygrail {
    display: flex;
    flex-direction: column;
}
.flex-body {
    display: flex;
    flex: 1;
}

Grid Way (Simple!)

Header

Main Content

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

🏆 Grid wins! Page layouts are 2-dimensional (rows AND columns). Grid's grid-template-areas makes it visually clear.

4. Product Cards (Equal Width Row)

Flexbox Way

Product 1

Product 2

Product 3

.flex-products {
display: flex;
gap: 20px;
}
.flex-product { flex: 1; }

Grid Way

Product 1

Product 2

Product 3

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

✅ Both work equally well. Flexbox is simpler for fixed number of items. Grid is better if you need exact column control.

5. Two-Column Layout (Side-by-Side)

Flexbox Way

Left Column

Right Column

.two-col-demo {
display: flex;
gap: 20px;
}
.flex-side { flex: 1; }

Grid Way

Left Column

Right Column

.grid-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

✅ Both work well. Two columns is simple enough for both. Use whatever you prefer.

📊 Summary: Grid vs Flexbox

/* =================================== WHEN TO USE GRID (2D Layout) =================================== */ ✓ Overall page layouts (header, sidebar, main, footer) ✓ Dashboards and complex grids ✓ Magazine-style layouts ✓ When you need control over BOTH rows and columns ✓ Overlapping elements /* =================================== WHEN TO USE FLEXBOX (1D Layout) =================================== */ ✓ Navigation bars ✓ Centering items (easier than Grid) ✓ Distributing space between items ✓ Button groups ✓ Card rows ✓ Content that wraps to next line /* =================================== USE BOTH TOGETHER! =================================== */ /* Grid for page structure, Flexbox for components */ .page { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; gap: 20px; } .header { display: flex; justify-content: space-between; } /* Flexbox inside Grid */ .nav { display: flex; gap: 20px; } /* Flexbox inside Grid */ .card-container { display: flex; flex-wrap: wrap; } /* Flexbox inside Grid */

⚡ Quick Decision Guide

/* Q: Am I building a PAGE LAYOUT (header, sidebar, main, footer)? */ /* A: USE GRID */ /* Q: Am I building a COMPONENT (navbar, button group, card row)? */ /* A: USE FLEXBOX */ /* Q: Do I need BOTH rows AND columns? */ /* A: USE GRID */ /* Q: Do I need ONE direction only (row OR column)? */ /* A: USE FLEXBOX */ /* Q: Do I want items to automatically wrap to next line? */ /* A: USE FLEXBOX (flex-wrap: wrap) OR Grid (auto-fit) */ /* Q: Do I need exact placement of items? */ /* A: USE GRID (grid-template-areas) */ /* Q: Am I centering something? */ /* A: USE FLEXBOX (justify-content + align-items) */

🧠 Quick Quiz

/* Question 1: What should you use for a navigation bar? */ /* Answer: Flexbox (it's 1D — just a row) */ /* Question 2: What should you use for a complete page layout with header, sidebar, main, and footer? */ /* Answer: Grid (it's 2D — rows AND columns) */ /* Question 3: Can you use Flexbox inside Grid? */ /* Answer: Yes! Use Grid for page structure, Flexbox for components inside */ /* Question 4: What layout system is better for centering items? */ /* Answer: Both work, but Flexbox is simpler (justify-content + align-items) */ /* Question 5: Which one uses grid-template-areas? */ /* Answer: CSS Grid (visual layout definition) */