CSS Grid vs Flexbox: When to Use Which

I see developers pick one — usually Flexbox — and force it to do everything. But Grid and Flexbox are complementary tools. Understanding when each shines will make your CSS cleaner and more maintainable.

Flexbox: One-Dimensional Layouts

Flexbox works best when you are laying out items along a single axis. Navigation bars, button groups, card rows, centering content — these are Flexbox territory:

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

.card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto; /* push to bottom of card */
}

Grid: Two-Dimensional Layouts

When you need to control both rows and columns simultaneously, Grid is the right choice. Page layouts, dashboards, image galleries, and any layout where items need to align in both directions:

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

The Decision Framework

My rule of thumb: if you are thinking about alignment in one direction, use Flexbox. If you are thinking about a layout with rows and columns, use Grid. And there is nothing wrong with nesting Flexbox inside Grid — I do it constantly. A Grid for the overall page layout, Flexbox for the navigation inside the header, Grid again for the card gallery in the main area.

The key insight is that the best layouts use both. They are not competitors — they are teammates.