24 CSS Grid Layouts
A CSS grid layout uses native display: grid to place items in rows and columns at the same time. These 24 hand-coded layouts are ready-to-ship grid templates for dashboards, magazine pages, photo galleries, and product listings — copy the CSS, drop in your content, and ship.
01 / 24
Holy Grail
Pure CSS 
The classic five-region web layout — header, sidebar, main, aside, footer — built with `grid-template-areas` so the markup reads like the visual. Three named columns let you swap left/right widths in one place.
02 / 24
12-Column Grid
Pure CSS 
A Bootstrap-style 12-column track with `repeat(12, minmax(0, 1fr))`. Cells span any number of columns via `grid-column: span N`, giving you the familiar `col-6 / col-3 / col-9` rhythm without a framework.
03 / 24
Bento Box
Pure CSS 
Apple-keynote bento grid — six tiles of asymmetric sizes orchestrated with `grid-template-areas`. Each tile name reads like English, so swapping the layout means renaming areas, not rewriting math.
04 / 24
Magazine Editorial
Pure CSS 
Editorial spread layout — a wide hero column anchors the page while side rails hold pull quotes, captions, and image plates. Built on a 6-column track with named areas; reads like a print magazine.
05 / 24
RAM Auto-Fit
Pure CSS 
The "RAM" pattern — `repeat(auto-fit, minmax(220px, 1fr))` — gives you a grid that wraps as many columns as the container allows, never overflows, and never goes below the minimum. The single most useful one-liner in CSS Grid.
06 / 24
Quantity Query
Pure CSS 
Layout that adapts to *how many* children it has using `:has()` and `:nth-child()` — one item gets a hero treatment, two split 50/50, three become a 3-column row, four become a 2×2. No JS.
07 / 24
Pinterest Masonry
Pure CSS 
Masonry-style brick layout using `grid-template-rows: masonry` (with `grid-auto-flow: dense` fallback). Cards of varying heights pack tightly without gaps — the Pinterest pattern, native CSS.
08 / 24
Hexagonal Honeycomb
Pure CSS 
Hexagon honeycomb tiling — alternating offset rows on a CSS Grid base, each cell shaped with `clip-path: polygon()`. The math falls out of the grid track widths; no transforms needed.
09 / 24
Subgrid Card
Pure CSS 
A row of cards whose internal sections (title / body / footer) line up across all cards using `grid-template-rows: subgrid`. The titles align even when one is two lines; same for the footer baseline.
10 / 24
Dashboard Skeleton
Pure CSS 
Admin dashboard skeleton — sticky sidebar, top bar, KPI row, main chart area, and a feed rail. Six named areas on a 12-column track so any region can grow without rebreaking the others.
11 / 24
Pricing Table
Pure CSS 
Three-column pricing tier on a CSS Grid base. The middle tier scales up using `transform: scale()` while staying in the same grid track — the baseline pricing pattern with consistent header / price / feature / CTA rows.
12 / 24
Kanban Board
Pure CSS 
Three-column kanban — Todo / In Progress / Done — with each column scrolling independently. Cards stack with `grid-auto-rows: min-content` so columns of different lengths still align at the top.
13 / 24
Aspect-Ratio Tiles
Pure CSS 
Photo-grid where every tile keeps a perfect 1:1 ratio via `aspect-ratio: 1`. Combined with `auto-fill`, tiles wrap responsively without breaking aspect or causing layout shift on image load.
14 / 24
Container-Query Card
Pure CSS 
A card whose internal layout adapts to its *container* width using `@container` queries — not the viewport. Below 320px it stacks vertically; above 320px it splits horizontal. Modern responsive design without media queries.
15 / 24
Diagonal Skew Grid
Pure CSS 
Grid cells skewed with `transform: skewY()` while their content counter-skews to stay readable. The brutalist diagonal-cut layout, all done at the grid layer.
16 / 24
Asymmetric Splash
Pure CSS 
Asymmetric magazine splash — one massive hero block, one tall column, three small thumbnails. Built with explicit `grid-row` / `grid-column` spans so every region has its coordinates visible.
17 / 24
Mosaic Photo Wall
Pure CSS 
Mosaic of mixed-size cells — a 4×4 base with hero / wide / tall / square shapes spanning multiple tracks. The "feature wall" pattern from photography sites and gallery landings.
18 / 24
Dense Packing
Pure CSS 
Dense packing with `grid-auto-flow: dense` — items fill earlier holes when later items are smaller, reducing whitespace. The "Tetris" mode of CSS Grid.
19 / 24
Numbered Steps Track
Pure CSS 
Horizontal stepper track — five circular nodes connected by a thin progress rail using grid columns and a `::before` pseudo-element. The onboarding / checkout step indicator.
20 / 24
Mac App Sidebar
Pure CSS 
Two-pane macOS-style app — narrow source list on the left, content pane on the right. The classic Finder / Mail layout, built with two grid columns and named areas.
21 / 24
Scroll-Snap Slider
Pure CSS 
Horizontal slider with `scroll-snap-type: x mandatory` so each pane locks into place after a swipe. Pure CSS, native scroll, no JS — the gallery / carousel pattern done right.
22 / 24
Aurora Map
Pure CSS 
A landing-page region map where each block is sized by its importance and tinted with an aurora gradient. Combines `grid-template-areas` with conic and radial backgrounds for a dreamy, layered surface.
23 / 24
Logo Wall
Pure CSS 
A trusted-by logo wall — even-spaced grid of monochrome logos using `repeat(auto-fit, minmax(120px, 1fr))`. Hover lifts a single tile to its colour version.
Build your own
Tweak the exact look in our visual generators — no signup, instant copy-paste.
FAQ
Frequently asked questions
What is a CSS grid layout?
A CSS grid layout uses display: grid to position elements in two dimensions — rows and columns at the same time — using explicit tracks (`grid-template-columns: 1fr 2fr 1fr`), named regions (`grid-template-areas`), or auto-flowing patterns (`repeat(auto-fit, minmax(240px, 1fr))`). It replaces float layouts and complements flexbox.
When should I use grid instead of flexbox?
Use grid when you need control over BOTH dimensions at once — a page layout with header / sidebar / main / footer, a card gallery that wraps, a dashboard with cells of varying spans. Use flexbox for a single-axis arrangement — a navbar, a button group, a row of pills.
Which CSS grid pattern is the most modern?
`repeat(auto-fit, minmax(N, 1fr))` is the responsive default — it gives you a card grid that wraps without media queries. For aligned content across sibling cards, `grid-template-rows: subgrid` (Chrome 117+, Firefox 71+, Safari 16+) lets a child grid inherit its parent's row tracks. `:has()` plus `nth-last-child` enables quantity queries that adapt to item counts.
Do these grid layouts work without JavaScript?
Yes — every demo in this collection is 100% CSS. No frameworks, no JavaScript handlers. Drop the markup and CSS into any HTML page and the layout works as-is.
Are CSS grid layouts responsive?
Yes. Patterns like RAM (`repeat(auto-fit, minmax())`) re-flow at every viewport size with no media queries. Fixed-track layouts (holy grail, 12-column) typically pair with one breakpoint to switch from multi-column to single-column on mobile. Every layout in this collection is mobile-first.
Related collections
15 CSS Footer Designs
15
15 hand-coded CSS footer designs — aurora-drift, newspaper masthead, mega multi-column, CTA stripe, trust badges, vinyl record, neon sign, FAQ drawer, language switcher, hover wave and more. Copy-paste ready.
footer page footer css footer
Responsive
30 CSS Hero Sections
30
30 hand-coded CSS hero sections — gradient mesh, glassmorphism, bento, terminal, parallax, 3D card stack, conic orbit and more. No images, copy-paste ready.
hero section landing page saas hero
Responsive
21 CSS Pricing Sections
21
21 hand-coded CSS pricing sections — three-tier cards, comparison tables, billing toggles, usage sliders, per-seat calculators. Copy-paste ready, accessible, mobile-first.
pricing section saas pricing pricing table
Responsive