After reading this lesson, you'll be able to confidently do the following 3 things.

• ▸✅ The grid-template-columns: repeat(auto-fit, minmax()) pattern
• ▸✅ 12-column layouts with grid-area and named lines
• ▸✅ When to use Flex vs Grid

Keep these learning goals as a checklist — once you can answer all of them, close the lesson.

The Core Idea

CSS Grid = a tool for building layouts using rows and columns (2D). If Flexbox handles single-axis alignment, Grid is like a chessboard — a grid structure.

When to use Grid

• ▸Card grids (3 columns, 4 rows)
• ▸Full-page layouts (header · sidebar · main · footer)
• ▸Complex layouts like magazines or newspapers
• ▸Tables (more flexible than table)

Use Flexbox for single-axis alignment, Grid for 2D. The two coexist just fine.

Basic Usage

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

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

A 3-column grid, auto-placed into 2 rows.

fr — Fractional Unit

grid-template-columns: 1fr 2fr 1fr;
/* 1:2:1 ratio — middle is 2 times larger */

fr = one unit of remaining space. It's a ratio, not pixels. The ratio holds regardless of screen size.

repeat — Shorthand for Repetition

grid-template-columns: repeat(4, 1fr);
/* = 1fr 1fr 1fr 1fr */

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* Minimum 200px, automatically placed as much as possible */

auto-fill + minmax is the magic of responsive grids — it automatically adjusts to 1, 2, 3... columns based on screen width.

Naming Areas

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

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

You can visualize the layout at a glance. Overwhelmingly useful for full-page structure.

Placing Grid Items Explicitly

.featured {
    grid-column: 1 / 4;     /* Line 1 ~ Line 4 (occupies 3 cells) */
    grid-row: 1 / 3;        /* Line 1 ~ Line 3 (occupies 2 rows) */
}

Used when you want a specific card to appear larger. This kind of irregular layout is hard to achieve with Flexbox.

Flexbox vs Grid

Most of the time, you use both together. Grid for the big layout, Flexbox for smaller components inside it.

Quick Summary

• ▸Start with display: grid + grid-template-columns + gap
• ▸repeat(auto-fill, minmax(200px, 1fr)) = responsive card grid
• ▸grid-template-areas for full-page layout
• ▸Use alongside Flexbox

Once you understand the concepts in this lesson, you can give AI specific instructions. Instead of a vague 'fix this,' you make vocabulary-driven requests — that's where token savings start.

• ▸"Turn this card list into grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))"
• ▸"Convert this 12-column layout to CSS Grid"
• ▸"Add gap and explicit area placement to this grid"

Why this reduces tokens

Without the concepts, even after receiving an AI answer you have to ask 'What does that mean?' again. That follow-up question is what eats your tokens. Learn the concept once and the conversation ends in one exchange.