CSS Grid layout patterns
46 layouts that already exist in the wild — a holy grail page, a kanban board, a checkout, a magazine front. Each one opens in the editor with its breakpoints set up, so you change the tracks and copy CSS that has the media queries already written.
New to the properties? The CSS Grid cheat sheet covers each one and why you would reach for it, and the grid generator starts from a blank layout instead of a pattern.
Page shells
Where the header, navigation, content and footer sit. Every other pattern lives inside one of these.
-
Holy Grail Layout
Header, footer, two flanking sidebars and a fluid centre column — the layout CSS Grid finally made easy.
-
Dashboard Layout
Fixed sidebar, sticky topbar, scrolling content well. The admin-panel skeleton, without the framework.
-
Sidebar Layout
One fixed column, one fluid column, stacked on small screens.
-
App Shell
Rail, sidebar, header, content and a status bar — the full desktop application frame.
-
Admin Panel Layout
Sidebar navigation, a topbar, a breadcrumb strip and a content well that scrolls by itself.
-
Sticky Header Layout
A header that stays put while the page scrolls, over a centred content column.
-
Sticky Footer Layout
A footer that sits at the bottom of the viewport on short pages and below the content on long ones.
-
Documentation Layout
Section nav on the left, prose in the middle, on-page table of contents on the right.
-
Three Column Layout
Two rails and a fluid middle, folding down to one column in a sensible order.
-
Two Column Layout
Content and a sidebar, with the sidebar width you actually want at each size.
-
12 Column Grid
The bootstrap-style twelve-column grid, written in real CSS Grid with no row or col classes.
-
Full Bleed Layout
A measured reading column that lets images and heroes break out to the full window width.
Editorial
Layouts whose job is reading — articles, galleries, front pages and the hierarchy that makes them scannable.
-
Magazine Layout
An asymmetric editorial grid: a lead story, a stack of secondaries, and a pull-quote that breaks the column.
-
Blog Post with Sticky Contents
A readable measure in the middle, a sticky table of contents beside it, full-bleed figures that break the container.
-
Article With Sidebar
A readable article column with a sticky sidebar for related posts, share links or an ad slot.
-
News Homepage
A lead story, secondary features and a sidebar of headlines — the front page, in one grid.
-
Photo Gallery Grid
A responsive image grid with featured tiles that span two cells, and no media queries needed for the columns.
-
Portfolio Grid
Project tiles at mixed sizes, with the work you want seen first taking the biggest cell.
-
Alternating Timeline
Entries alternating either side of a centre line, collapsing to a single rail on mobile.
Marketing sections
The bands a landing page is assembled from. They stack rather than nest, so mix them freely.
-
Split Screen Hero
Copy on one side, artwork on the other, flipping to stacked on mobile.
-
Pricing Table
Three tiers side by side, with the featured plan given extra width.
-
Footer Columns
A brand block plus link columns that collapse gracefully.
-
Centered Hero Section
Eyebrow, headline, subhead and buttons centred in a measured column, with the section full width.
-
Feature Grid
A section heading over a grid of feature cards that reflows from one column to three.
-
Testimonial Grid
Quote cards at mixed weights, with the strongest testimonial given the larger cell.
-
Logo Wall
A row of customer logos that wraps evenly instead of leaving an orphan on the last line.
-
Stats Band
A band of key numbers with dividers between them, from a 2x2 block on mobile to one row on desktop.
-
CTA Band
A closing call to action: copy on the left, buttons on the right, stacked and centred on mobile.
-
FAQ Section
A sticky section heading beside two columns of questions, folding to one column on mobile.
-
Team Grid
Headshot cards in an even grid, with a lead card for the person you want introduced first.
-
Split Screen Layout
Two full-height halves — copy on one side, image or form on the other.
-
Alternating Feature Rows
Zig-zag rows of image and copy that swap sides, without reordering the HTML.
Commerce
Category, product, cart and checkout — the four pages that carry a shop.
-
Product Page
Gallery, buy box and details — the e-commerce detail page skeleton.
-
Product Listing Page
Filter rail, sort bar and a product grid — the category page every shop needs.
-
Shopping Cart Layout
Line items on the left, a sticky order summary on the right, stacked in the right order on mobile.
-
Checkout Layout
A single-column form beside a persistent order summary, with the summary first on mobile.
App UI
Layouts with state behind them, where the real constraint is usually which panes scroll.
-
Responsive Card Grid
Equal-width cards that reflow from one column to four without a single media query — or with them, if you want control.
-
Bento Grid
Mixed-size tiles in a tight, deliberate arrangement — the Apple keynote look.
-
Kanban Board
Columns of equal width that scroll horizontally as a set, each with its own scrolling card list.
-
Chat App Layout
Conversation list, message thread and a composer pinned to the bottom.
-
Email Client Layout
Folder rail, message list and reading pane — the classic three-pane application shell.
-
Calendar Month View
A seven-column month grid with a weekday header and events that span days.
-
Settings Page
Section navigation beside a single column of setting groups, with a save bar that stays visible.
-
Login Page Layout
A centred sign-in card beside a branded panel, folding to just the form on mobile.
-
Two Column Form
Paired fields that share a row on desktop and stack on mobile, with full-width fields that always span.
-
Data Table Shell
Toolbar, filters, a scrolling table body and a pagination footer that never moves.
Picking a pattern
The five groups answer different questions. Page shells decide where the header, navigation and footer live — start here, because every other pattern sits inside one. Editorial covers anything whose job is reading: articles, galleries, front pages. Marketing sections are the bands a landing page is assembled from, and they stack rather than nest. Commerce and App UI are the layouts with real state behind them, where the interesting constraint is usually which panes scroll.
Every pattern here is responsive by construction rather than by retrofit: the layout is drawn at each breakpoint, so the exported CSS contains only the properties that actually differ between them. That is the same output you get from the grid generator, and it converts to Tailwind, a React, Vue or Svelte component, or a shadcn-style compound component, depending on what your project uses.
Already have the CSS? The CSS Grid visualizer reads a stylesheet back into this same editor, which is the quickest way to find out why a grid you inherited does not behave.
Frequently asked questions
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?
What is the fr unit in CSS Grid?
fr is a fraction of the space left over after fixed tracks and gaps are subtracted. In grid-template-columns: 200px 1fr 2fr, the 200px is taken out first, then the remainder splits three ways — one part to the second column, two to the third. It is not a percentage of the container.