CSS Grid Product Listing Page Layout Generator
Filter rail, sort bar and a product grid — the category page every shop needs.
Reading orderAt Desktop, filters is the first thing seen but sortbar is the first thing focused. Placement has moved the layout out of document order, so keyboard and screen reader users get a different sequence from everyone else.
Seenheading → filters → sortbar → results
Focusedheading → sortbar → results → filters
Usually the fix is in the markup, not in CSS: reorder the children so the HTML reads the way the page does, then place them back where you want them. Reaching for order or row-reverse instead moves the picture without moving the focus, which is the bug rather than the cure.
It is not always wrong. A full-height sidebar beside a topbar diverges by construction, and the accepted answer there is a skip link to the main content rather than a reordered document. WCAG 2.2 SC 1.3.2 asks that the sequence be meaningful — not that it be identical.
Named areas. The CSS is a picture of the layout, and only the properties that actually change get repeated inside each media query.
.plp {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
grid-template-areas:
"heading"
"sortbar"
"results";
}
.plp > .heading { grid-area: heading; }
.plp > .sortbar { grid-area: sortbar; }
.plp > .results { grid-area: results; }
.plp > .filters { display: none; }
@media (min-width: 900px) {
.plp {
grid-template-columns: 240px minmax(0, 1fr);
grid-template-rows: auto auto 1fr;
gap: 32px;
grid-template-areas:
"heading heading"
"filters sortbar"
"filters results";
}
.plp > .filters { grid-area: filters; }
}
How this layout works
Two grids, nested. The page grid places the filter rail beside the results; the results area is its own repeat(auto-fill, minmax(220px, 1fr)) grid so the card count reflows without touching the page layout.
auto-fill is the right choice here, not auto-fit. On a page of 40 products you want a consistent card width across every row, and auto-fit would stretch the last row of two survivors across the whole width.
On mobile the filter rail becomes a button that opens a sheet. The generator emits display: none for it at the narrow breakpoint — that is your cue to render the trigger, not permission to ship the page without filters.
Every property used here is listed in the CSS Grid cheat sheet, with the reason to reach for it.
Frequently asked questions
Should a product grid use auto-fit or auto-fill?
auto-fill. On a category page of forty products you want a consistent card width in every row; auto-fit would stretch a final row of two products across the full width.What happens to the filter rail on mobile?
display: none at the narrow breakpoint, which is the cue to render the trigger — not a reason to ship a category page with no filters.How do I center a grid in CSS?
justify-content: center on the grid container to centre the whole grid inside it, and margin-inline: auto with a max-width to centre the container in the page. These are different jobs: the first moves the tracks within the container, the second moves the container itself.How do I center items inside a CSS grid?
place-items: center on the container. That is shorthand for align-items plus justify-items, and it centres every item inside its own cell on both axes. For a single item, use place-self: center on that item instead.How do I make a CSS grid responsive?
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) and it reflows at every width with no media queries at all. Add breakpoints only when the exact column count matters, or when the layout has to change shape rather than just wrap.When should I use CSS Grid instead of Flexbox?
How to use it
-
Open the pattern
The product listing page loads into the editor already responsive, with every breakpoint set up.
-
Change the tracks
Edit the column and row sizes in the Tracks panel. Anything valid in a track list works.
-
Redraw at another width
Move the ruler past a breakpoint marker and rearrange. Only the placement changes.
-
Copy the code
Take CSS, HTML, Tailwind or a shadcn component. The media queries are already written.