CSS — Grid

Rows and columns at once

Where flexbox handles one axis, CSS Grid handles both simultaneously:

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);   /* 3 equal columns */
    gap: 16px;
}

1fr = one fraction of available space. Three of them split the width equally:

<div class="gallery">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
</div>

What the browser displays

(Six cells in a tidy 3×2 arrangement with even gutters — no math, no floats.)

Column recipes you'll reuse forever

/* Sidebar + content: fixed and fluid */
.layout {
    display: grid;
    grid-template-columns: 240px 1fr;
}

/* Holy grail: header/footer rows + 3 columns */
.page {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;   /* header body footer */
    min-height: 100vh;
}

/* Responsive card wall — no media queries! */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

That last one is the crown jewel: as many ≥250px columns as fit, all equal, reflowing automatically as the screen resizes.

Spanning

.feature { grid-column: span 2; }        /* stretch across two columns */
.masthead { grid-column: 1 / -1; }       /* full width (line 1 to end) */
.tall    { grid-row: span 2; }

<div class="gallery">
    <div class="feature">Wide hero</div>   <!-- takes 2 slots -->
    <div>B</div><div>C</div><div>D</div>
</div>

Grid auto-places items into remaining holes — the feature consumes two top slots, others flow around it.

Naming template areas

Whole-page layouts readable like ASCII art:

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

@media (max-width: 700px) {
    .page {
        grid-template-areas:
            "header"
            "main"
            "footer";
    }
    .sidebar { display: none; }
}

Rearranging an entire page = editing one string. This is why developers fall in love with grid.

Alignment inside cells

Same vocabulary as flexbox:

.gallery {
    align-items: center;      /* vertical within each cell   */
    justify-items: center;    /* horizontal within each cell */
}
.hero-cell {
    place-self: center;       /* shorthand for this one item */
}

Flexbox or Grid?

Question	Answer
Content flows in ONE direction?	Flexbox
Items must align to BOTH axes / fixed structure?	Grid
Toolbar, nav row, button group	Flexbox
Page skeleton, gallery, dashboard	Grid

They compose beautifully: grid for the page frame, flex for components inside it.

Mini Practice

1. Build a 3-column photo wall with repeat(auto-fill, minmax(200px, 1fr))
2. Sidebar layout: 240px 1fr; make the first item span full width
3. Recreate the named-areas page above; flip to mobile via one media query
4. Make a magazine tile where one image spans 2×2 (grid-column + grid-row)
5. Center content in every cell using alignment properties

Next: transitions →