A grid layout whose tab order doesn't match what's on screen

I reordered items visually with Grid, and now keyboard users tab through the page in a totally different order than what they see.

IntermediateRead 5 minDoing: under an hour6 steps

▶ Start

What you'll have at the end

A grid layout whose visual order matches its source order again, confirmed by tabbing through the page without a mouse

Before you start

You need

A CSS Grid layout already live, with at least one item's on-screen position set by an order value, an explicit grid-column or grid-row placement, or dense auto-flow, so where it sits on screen no longer matches where it sits in the HTML.

Not covered

Deciding whether an item should be reordered at all, or building the grid from scratch. This recipe only repairs a mismatch that already exists between what a grid shows and what its HTML says.

Leans on

6 steps

Where to go next

Build a full-page shell with header, sidebar, main and footer using grid-template-areas

start there instead when you're building the shell itself: it keeps main ahead of sidebar in the HTML and on screen from the first line, so this repair never comes up.

Checked 20 Aug 2026

Part of the CSS Grid Layout cookbook