CSS Grid in 2026: A Practical Guide With Real Layout Code

CSS Grid has been in every major browser for years, so the interesting question in 2026 isn’t whether to use it. It’s when Grid beats Flexbox, and how to write layouts you won’t have to rip out in six months. Here’s how I actually build with it.

If you’ve been shipping layouts with float hacks or a stack of framework utility classes, Grid is the part of modern CSS that pays off fastest. It’s also the part people misuse most, usually by reaching for it when Flexbox would have been simpler.

Grid vs Flexbox: pick the right tool

The short version: Flexbox lays out items along one axis. Grid lays out items along two. That sounds academic until you’re trying to build a page where the sidebar, main content, and footer all need to line up across rows and columns at the same time. Flexbox can fake that with nested wrappers. Grid does it in one declaration.

My rule of thumb:

• Flexbox for a row of buttons, a nav bar, a card’s internal content, anything that flows in one direction.
• Grid for the overall page skeleton, card galleries, dashboards, and anything with an intentional two-dimensional structure.

They’re not competitors. Most real pages use both, and the trick is knowing which container owns which job.

A page layout you can actually ship

Here’s a full-page shell. No framework, no wrapper divs, and it collapses to a single column on small screens with one media query.

.page {
 display: grid;
 grid-template-columns: 240px minmax(0, 1fr);
 grid-template-rows: auto 1fr auto;
 grid-template-areas:
 "header header"
 "sidebar main"
 "footer footer";
 min-height: 100dvh;
 gap: 1.5rem;
}

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

@media (max-width: 48rem) {
 .page {
 grid-template-columns: 1fr;
 grid-template-areas:
 "header"
 "main"
 "sidebar"
 "footer";
 }
}

A few things worth calling out. minmax(0, 1fr) instead of plain 1fr prevents the classic bug where a wide table or long unbroken string blows out the column. 100dvh handles mobile browser chrome better than 100vh ever did. And grid-template-areas makes the layout readable to whoever inherits the file, which matters more than cleverness.

Responsive card grids without the media query pile

This is where Grid quietly replaced most of my old breakpoint code. If you want cards that fit as many per row as the viewport allows, auto-fit plus minmax does it in two lines.

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

That’s it. Cards are at least 18rem wide, they stretch to fill the row, and the column count adjusts on its own. No breakpoints for 3-up, 2-up, 1-up. If you’d rather have the last row’s items keep their natural size instead of stretching, swap auto-fit for auto-fill.

One gotcha with auto-fit

auto-fit collapses empty tracks, which is usually what you want. But if you have a single card in the last row, it will stretch to full width and look odd. Either use auto-fill or cap the card width inside the grid item. I’ve seen this bite people on team pages and pricing tables more than anywhere else.

Subgrid is finally usable

Subgrid shipped in all three major engines and has been stable long enough that I use it in production without a fallback. It solves the problem Grid used to have: nested grids couldn’t align to their parent’s tracks.

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

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

.card h3, .card p, .card .actions {
 /* these now align across every card automatically */
}

Before subgrid, aligning titles, body text, and buttons across cards meant fixed heights or JavaScript. Now the card’s internal rows inherit the parent’s grid lines and line up on their own. If you maintain a component library, this is the single biggest quality-of-life improvement of the last few years.

Alignment and centering, done properly

Grid killed the “how do I center a div” question, but people still mix up the four alignment properties. Here’s the difference:

• justify-content positions the whole grid inside its container along the inline axis.
• align-content does the same along the block axis.
• justify-items positions each item inside its own cell, inline axis.
• align-items positions each item inside its own cell, block axis.

Content controls the tracks. Items control the things in the tracks. Once that clicks, the properties stop feeling arbitrary.

Performance and accessibility notes

Grid itself is not a performance concern. Layout cost is negligible compared to what you save by dropping a grid framework’s CSS. Two real things to watch:

• Source order vs visual order. Grid lets you place items anywhere, which means the DOM order and the visual order can disagree. Screen readers and keyboard tab order follow the DOM. If a keyboard user tabs through your page in a confusing sequence, your grid is the problem, not their browser.
• Don’t rely on grid placement for meaning. If a sidebar visually appears first but comes second in the markup, that’s fine. If it appears first and matters first, put it first in the HTML and place it with grid.

When I still reach for something else

Multi-column text? That’s columns, not Grid. Masonry-style layouts with uneven heights? CSS masonry is still not something I’d bet a client project on across all engines, so I use a small amount of JavaScript or accept uniform rows. And if a layout only ever flows one direction, Flexbox is less code and easier to reason about.

The honest summary: Grid is the right default for page structure and card layouts, Flexbox handles the inside of components, and the two together mean most projects I build for Long Island web design clients don’t need a layout framework at all.

FAQ

Is CSS Grid supported everywhere in 2026?

Yes. Every current version of Chrome, Safari, Firefox, and Edge supports Grid, including subgrid. The only reason to avoid it is if you’re supporting something genuinely ancient, which almost nobody is anymore.

Should I use Grid or Flexbox for a navigation bar?

Flexbox. A nav bar is a single row of items, which is exactly what Flexbox is built for. Save Grid for when items need to align across rows and columns at the same time.

Do I still need a CSS framework if I use Grid?

Less than you used to. Grid handles layout, and modern CSS handles spacing, colors, and typography with custom properties. Plenty of sites now ship a fraction of the CSS they did five years ago, and they’re faster for it.