CSS Grid gives you two-dimensional control over your layouts — rows and columns at the same time. It replaces a decade of float hacks and table-based layouts.

Basic setup

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

Naming areas

.layout {
    display: grid;
    grid-template-areas:
        "header header"
        "sidebar main"
        "footer footer";
}

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

Auto-fit responsive columns

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

This single rule creates a responsive card grid with no media queries.

When to use Grid vs Flexbox

• Grid — two-dimensional layouts (rows and columns)
• Flexbox — one-dimensional layouts (a row or a column)

Use both. They are designed to complement each other.