CSS Grid in 2026: A Practical Guide for Real Websites

Most people learn CSS Grid backwards. They memorize grid-template-columns, build a three-column card layout, and then never touch it again because flexbox already handled everything else. That’s a waste, because Grid solves a specific class of layout problems that flexbox genuinely cannot, and once you see the pattern you’ll reach for it constantly. This is the version of Grid I actually use when building sites, not the trivia version.

What Grid Is Actually For

Flexbox is one-dimensional. You lay things out in a row or a column, and the browser distributes space along that single axis. Grid is two-dimensional: rows and columns at the same time, with alignment control in both directions. That distinction matters more than any syntax detail.

The practical rule I follow:

• Content determines the size of the container? Use flexbox. A nav bar, a row of buttons, a stack of tags.
• The container determines where content goes? Use Grid. Page layouts, dashboards, card galleries, anything with a defined structure.

You will use both on the same page. That’s normal and correct. Grid is not a flexbox replacement, it’s a different tool.

The Basics, Without the Fluff

A grid container needs two things: a definition of its tracks, and children to place into them. The browser handles the rest.

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

repeat(3, 1fr) means three equal columns. 1fr is one fraction of the leftover space, and it behaves far better than percentages because it accounts for gaps automatically. The gap property applies between tracks only, never on the outer edges, which is exactly what you want.

If you’ve been writing margin-right on every card except the last one, you can stop. That entire category of bug disappears with Grid.

Placing Items Explicitly

By default, children flow into the grid in source order. When you need something in a specific spot, you place it:

.hero {
 grid-column: 1 / -1; /* span every column */
}

.sidebar {
 grid-column: 1;
 grid-row: 2 / 4;
}

The -1 in 1 / -1 refers to the last grid line, so that rule means “start at the first line, end at the last one.” It’s more resilient than hardcoding 1 / 4, because if you change the column count later, the span still works.

Named Areas Are Underrated

Line numbers get unreadable fast. Named areas let you draw the layout in the CSS itself, which means anyone reading the file can see the structure without counting lines.

.page {
 display: grid;
 grid-template-columns: 240px 1fr;
 grid-template-areas:
 "header header"
 "sidebar main"
 "footer footer";
 gap: 1rem;
}

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

That ASCII diagram is the actual layout. Change the strings and you change the page. When I’m doing Long Island web design work for small businesses, this is usually the first thing I set up on a new build, because it makes the responsive behavior obvious to whoever touches it next.

Responsive Grid Without Media Queries

This is the part that makes Grid worth learning. You can write a layout that responds to its container with zero breakpoints:

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

Read it as: fit as many columns as you can, but never let a column go below 280px, and share leftover space equally. On a wide screen you get four or five cards per row. On a phone you get one. No media queries involved.

auto-fit vs auto-fill

These two look identical and behave differently when there are fewer items than columns:

• auto-fit collapses empty tracks, so the existing items stretch to fill the row.
• auto-fill keeps the empty tracks, so items stay at their natural width and leave gaps on the right.

For a card gallery where you want the cards to fill the space, use auto-fit. For a form or a set of controls where you want consistent item widths regardless of count, use auto-fill.

Subgrid: Finally Usable

For years, aligning a card’s heading across a row of cards required JavaScript or fixed heights. Subgrid fixes that by letting a nested grid participate in its parent’s tracks.

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

.card {
 display: grid;
 grid-row: span 3;
 grid-template-rows: subgrid;
}

Now every card’s title, body, and footer line up across the whole row, even when the text lengths differ. Subgrid shipped in all major browsers back in 2023, so in 2026 there’s no reason to avoid it. The old fixed-height hack is dead.

Things That Trip People Up

• Grid items have min-width: auto by default. A long unbroken string (a URL, a code token) will blow out your column. Fix it with min-width: 0 on the item, or overflow-wrap: anywhere.
• fr and auto are not the same. auto sizes to content, fr distributes free space. Mixing them is fine, but know which you’re asking for.
• Nested grids don’t inherit tracks. Without subgrid, a child grid starts fresh. That’s the whole reason subgrid exists.
• Don’t reach for Grid when flexbox is simpler. A single row of items with equal spacing is a flexbox job.

Browser Support in 2026

Grid has been in every browser for over a decade, and subgrid has been stable since 2023. There is no meaningful support argument against using either. If you’re still shipping float-based layouts or a 12-column framework from 2015, you’re carrying weight you don’t need.

FAQ

Should I use CSS Grid or flexbox?

Use Grid when you’re defining the overall structure of a container (page layout, card gallery, dashboard) and flexbox when you’re distributing items along a single axis (nav links, button rows, tag lists). Most real pages use both, and that’s the intended design.

Do I still need media queries with Grid?

Often no, at least not for column counts. repeat(auto-fit, minmax(...)) handles most responsive card and content layouts on its own. You’ll still want media queries for changes that aren’t about track count, like switching a sidebar from beside the content to above it.

Is subgrid safe to use in production now?

Yes. It’s supported in all current major browsers and has been for years. The main thing to watch is that it only works when the parent is itself a grid with enough tracks defined for the child to span.