Playground

Playground · 24 demos

CSS Grid Layouts Playground

Pick any demo to open it in a live, side-by-side editor. Tweak the HTML, CSS or JS and see your changes render instantly. Reset any time to return to the original.

Or browse the full CSS Grid Layouts collection for the gallery view with code panels.

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.

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.

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.

Magazine Editorial

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.

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.

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.

Pinterest Masonry

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.

Hexagonal Honeycomb

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.

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.

Dashboard Skeleton

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.

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.

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.

Aspect-Ratio Tiles

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.

Container-Query Card

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.

Diagonal Skew Grid

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.

Asymmetric Splash

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.

Mosaic Photo Wall

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.

Dense packing with `grid-auto-flow: dense` — items fill earlier holes when later items are smaller, reducing whitespace. The "Tetris" mode of CSS Grid.

Numbered Steps Track

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.

Mac App Sidebar

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.

Scroll-Snap Slider

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.

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.

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.

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.