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.

24 unique layouts 100% copy-paste ready Published May 4, 2026

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.

Live Demo Try it

02 / 24

12-Column Grid

Pure CSS

A Bootstrap-style 12-column track with `repeat(12, minmax(0, 1fr))`.

Live Demo Try it

03 / 24

Bento Box

Pure CSS

Apple-keynote bento grid — six tiles of asymmetric sizes orchestrated with `grid-template-areas`.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

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.

Live Demo Try it

07 / 24

Pinterest Masonry

Pure CSS

Masonry-style brick layout using `grid-template-rows: masonry` (with `grid-auto-flow: dense` fallback).

Live Demo Try it

08 / 24

Hexagonal Honeycomb

Pure CSS

Hexagon honeycomb tiling — alternating offset rows on a CSS Grid base, each cell shaped with `clip-path: polygon()`.

Live Demo Try it

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`.

Live Demo Try it

10 / 24

Dashboard Skeleton

Pure CSS

Admin dashboard skeleton — sticky sidebar, top bar, KPI row, main chart area, and a feed rail.

Live Demo Try it

11 / 24

Pricing Table

Pure CSS

Three-column pricing tier on a CSS Grid base.

Live Demo Try it

12 / 24

Kanban Board

Pure CSS

Three-column kanban — Todo / In Progress / Done — with each column scrolling independently.

Live Demo Try it

13 / 24

Aspect-Ratio Tiles

Pure CSS

Photo-grid where every tile keeps a perfect 1:1 ratio via `aspect-ratio: 1`.

Live Demo Try it

14 / 24

Container-Query Card

Pure CSS

A card whose internal layout adapts to its *container* width using `@container` queries — not the viewport.

Live Demo Try it

15 / 24

Diagonal Skew Grid

Pure CSS

Grid cells skewed with `transform: skewY()` while their content counter-skews to stay readable.

Live Demo Try it

16 / 24

Asymmetric Splash

Pure CSS

Asymmetric magazine splash — one massive hero block, one tall column, three small thumbnails.

Live Demo Try it

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.

Live Demo Try it

18 / 24

Dense Packing

Pure CSS

Dense packing with `grid-auto-flow: dense` — items fill earlier holes when later items are smaller, reducing whitespace.

Live Demo Try it

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.

Live Demo Try it

20 / 24

Mac App Sidebar

Pure CSS

Two-pane macOS-style app — narrow source list on the left, content pane on the right.

Live Demo Try it

21 / 24

Scroll-Snap Slider

Pure CSS

Horizontal slider with `scroll-snap-type: x mandatory` so each pane locks into place after a swipe.

Live Demo Try it

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.

Live Demo Try it

23 / 24

Logo Wall

Pure CSS

A trusted-by logo wall — even-spaced grid of monochrome logos using `repeat(auto-fit, minmax(120px, 1fr))`.

Live Demo Try it

24 / 24

Periodic Table

Pure CSS

A small periodic-table-style grid where elements are placed by explicit `grid-column` + `grid-row` coordinates and colored by category — the most explicit-coordinates demo in the set.

Live Demo Try it

Build your own

Tweak the exact look in our visual generators — no signup, instant copy-paste.

Generator

CSS Grid Generator

Drag the grid lines to compose the exact template.

Tool

Responsive Breakpoint Tester

Verify the layout across phone, tablet, and desktop.

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

CSS Center a Div

The complete guide to centering a div in CSS in 2026 — covering all 5 production techniques with live interactive demos. Flexbox (the modern default, works for 95% of cases): <code>display: flex; align-items: center; justify-content: center</code> on the parent. CSS Grid (one-line shorthand): <code>display: grid; place-items: center</code>. Absolute positioning + transform (for overlays and modals): <code>position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)</code>. Margin auto (for block elements with a known width): <code>margin: 0 auto</code> (horizontal only) or <code>margin: auto</code> with <code>position: absolute</code> + <code>inset: 0</code> (both axes). All methods side-by-side comparison — see every technique render the same content with visible axis crosshairs so you can see exactly where each method lands the element. All 5 demos are 100% pure CSS, MIT-licensed, copy-paste ready, with detailed explanations of which method to use when. Works in every modern browser (Chrome, Safari, Firefox, Edge), no JavaScript required.

css center a div center a div center div css Responsive

10 CSS Feature Sections

10 hand-coded CSS feature section templates covering the patterns landing pages actually need in 2026 — icon grid with stats strip, Apple-style bento grid layout, dark glassmorphism with animated blobs, scroll-reveal alternating rows, developer SDK with syntax-highlighted code preview, side-by-side comparison table with pricing cards, full SaaS hero with mesh-gradient + social proof, 3D mousemove tilt cards, parchment-cream floating phone mockup, and Linear-style product roadmap timeline. 7 of 10 demos are 100% pure CSS — drop into any stack. The 3 JS-enhanced demos (scroll-reveal, 3D tilt, timeline-glow) degrade gracefully if JavaScript is disabled. Every demo respects prefers-reduced-motion, uses scoped .fsNN__* class names so multiple can coexist, and ships MIT-licensed.

css feature section feature section css feature sections Responsive

15 CSS Flexbox Layouts

15 production-ready CSS flexbox layouts with live demos and copy-paste code — holy grail page shell, responsive card grid, sticky navbar, masonry-style columns, sidebar dashboard, product cards, pricing table, magazine article, sticky footer with min-block-size: 100dvh, centered hero, vertical timeline, chat interface, mosaic gallery, two-column form, and kanban board. Every demo is mobile-first, WCAG-friendly, and works without a build step.

css flexbox flexbox layout css flexbox layout Responsive