🧱 Grid Layout Fundamentals

Why Grid Exists

For most of the web's history, "layout" meant bending tools that were never designed for it. Developers stacked HTML tables, floated boxes and cleared them, or nested div after div just to get a sidebar to sit beside some content. Each technique was a workaround, and each one leaked into your markup.

CSS Grid Layout is the first system designed specifically for laying out the two-dimensional web. You describe a grid of rows and columns on a parent element, and its children snap into that grid. The structure lives entirely in CSS, so your HTML stays clean and semantic.

💡 Jen Simmons, a web-standards advocate at Apple, put it well: Grid brings a genuinely new approach to problems we had been hacking around for as long as we'd been making websites. It is not a slightly-better float — it is a different way of thinking about the page.

Grid vs. Flexbox

Grid and Flexbox are partners, not rivals. The clearest way to choose is to ask: am I arranging things in one direction, or in two at once?

• Flexbox is like arranging books on a single shelf. You control how they spread and align along that one line.
• Grid is like arranging books in a whole bookcase. You control both the shelf (row) and the slot on the shelf (column) for every book.

In real projects you almost always use both: Grid lays out the overall page shell, and Flexbox aligns the contents inside individual grid areas — the nav items inside a header, the buttons inside a card footer.

The Grid Vocabulary

Grid has seven words worth memorizing. Learn them once and every article, error message, and DevTools panel will make sense.

Defining Tracks & the fr Unit

You turn any element into a grid container with a single declaration:

.container {
  display: grid;
}

Just like Flexbox, this makes the children into grid items. But unlike Flexbox, nothing visible happens yet — a grid with no defined tracks is just a single-column stack. You give it shape with grid-template-columns and grid-template-rows:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;  /* 3 columns */
  grid-template-rows: auto 400px;          /* 2 rows */
  gap: 20px;
}

That creates two fixed 200px side columns with a flexible middle, plus a content-sized row above a 400px row.

The fr unit

The fraction unit (fr) is unique to Grid. It represents a share of the leftover space after fixed sizes and gaps are subtracted. Think of slicing a pizza: give one column 1fr and another 2fr, and the second gets a slice twice as big.

/* Middle column is twice as wide as the outer two */
grid-template-columns: 1fr 2fr 1fr;

/* Fixed rails, flexible center — a classic app shell */
grid-template-columns: 240px 1fr;

Track-Sizing Toolbox

Grid gives you a small but powerful set of ways to size tracks. Here are the ones you'll use daily.

repeat() — stop typing the same value

grid-template-columns: repeat(3, 1fr);        /* = 1fr 1fr 1fr */
grid-template-columns: repeat(3, 100px 200px); /* = 100px 200px 100px 200px 100px 200px */
grid-template-columns: 100px repeat(2, 1fr) 100px; /* mix freely */

minmax(min, max) — a size range

minmax() sets a floor and a ceiling for a track. A balloon analogy fits: it expands as it fills, but won't grow past its limit.

/* Never smaller than 100px, never wider than 200px */
grid-template-columns: minmax(100px, 200px) 1fr 1fr;

/* Rows that grow with content but never collapse below 120px */
grid-auto-rows: minmax(120px, auto);

Content keywords: auto, min-content, max-content

/* Sidebar hugs its content; main content takes the rest */
grid-template-columns: max-content 1fr;

auto-fill and auto-fit — let the browser count

Combined with minmax(), these keywords ask the browser to fit as many tracks as it can. They are the secret behind media-query-free responsive grids (next section).

• auto-fill — creates as many tracks as fit, keeping empty ones. Like reserving theater seats even if some stay empty.
• auto-fit — creates tracks only for real items and collapses the empties, letting existing items stretch to fill. Like setting out seats only for the guests who showed up.

Gaps & the Implicit Grid

Gaps are gutters, not margins

The gap property spaces tracks apart without adding space at the outer edges — no more fragile margin math.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 30px;      /* between rows */
  column-gap: 20px;   /* between columns */
  gap: 30px 20px;     /* shorthand: row-gap column-gap */
  gap: 20px;          /* one value = both */
}

Explicit vs. implicit grid

The tracks you declare in grid-template-* form the explicit grid. When you have more items than defined cells, Grid quietly manufactures new tracks — the implicit grid. You control the size and direction of those auto-created tracks:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* explicit columns */
  grid-auto-rows: 200px;                 /* extra rows are 200px tall */
  grid-auto-flow: row;                   /* fill rows first (default) */
}

It's like a restaurant with a planned seating chart (explicit) that wheels out extra tables when more guests than expected arrive (implicit). The grid-auto-flow property decides the direction items fill — row (default), column, or dense to backfill gaps left by larger items.

Responsive Grids Without Media Queries

Here is Grid's party trick. This single rule builds a gallery that adds and removes columns automatically as the viewport changes — no breakpoints, no JavaScript:

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

Read it right-to-left: each column is at least 250px and at most one flexible fraction. The browser fits as many 250px+ columns as the width allows, then auto-fit stretches them to share the leftover space. Shrink the window and a column drops away; widen it and one appears.

820 = n·250 + (n−1)·20   →   n = 3 columns, each grows to ~253px

Hands-on Exercise

<div class="gallery">
  <article class="card"><h3>Item 1</h3><p>Short.</p></article>
  <article class="card"><h3>Item 2</h3><p>A much longer description that wraps across several lines.</p></article>
  <!-- four more cards -->
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  padding: 1.25rem;
  border: 1px solid #ddd;
  border-radius: 10px;
  /* No height needed — items stretch to the tallest in their row. */
}

Best Practices

Summary & Quiz

📚 Further Reading

• CSS-Tricks — A Complete Guide to CSS Grid
• MDN — CSS Grid Layout
• Grid Garden — an interactive learning game
• Grid by Example (Rachel Andrew)

🚀 What's Next?

You can now build a grid and size its tracks. Next we go deeper into the container side — named lines, grid-template-areas, the auto and alignment properties, and the powerful shorthands that tie them together.