30 CSS Grid Layouts

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 areas (grid-template-areas), or auto-flowing patterns (repeat(auto-fit, minmax(240px, 1fr))). Reach for grid whenever your layout needs alignment across BOTH axes at once: a page shell with header / sidebar / main / footer, a card gallery that reflows across breakpoints, a magazine-style asymmetric editorial spread, a kanban board with fixed-height columns and free-height cards, a pricing table with tier-aligned features, a data dashboard whose widgets snap to a shared grid. Every demo in this collection is graded on four axes tier-1 (US/UK/CA/AU/NZ) devs actually care about: (1) MODERN CSS — subgrid, container queries, :has() quantity queries, aspect-ratio, min()/clamp() intrinsic sizing, grid-auto-flow: dense, oklch()/color-mix() palettes, logical properties for RTL. (2) SEMANTIC + ACCESSIBLE — every layout is real landmarks (<header>/<nav>/<main>/<aside>/<footer>) with <article> for cards and heading order preserved, focus-visible rings, 44px+ touch targets, prefers-reduced-motion guarded. (3) INTRINSIC SIZING — minmax(), min(), clamp(), fit-content replace hardcoded pixel widths so layouts survive any content length. (4) DROP-IN PORTABILITY — every demo scoped under .cgl-NN with tokenized colors so you can retune the palette by changing 3-6 CSS custom properties without touching layout math.

Grid when you need control over BOTH dimensions at once — a page layout with header / sidebar / main / footer aligned to a shared grid, a card gallery whose rows AND columns matter, a dashboard with cells of varying spans, a pricing table where three tier cards align tier-name → feature list → footer CTA across all three columns. Flexbox when you're arranging along a SINGLE axis — a navbar row, a button group, a row of pills, a stack of chat messages. The two aren't competing; they're complementary — you'll often nest flexbox inside a grid item (a card's internal header/body/footer stack). The 30 demos in this collection cover both patterns: full-page shells (Modern Holy Grail Demo 04, Full-Bleed Layout Demo 01, Sticky Sidebar Grid Demo 02) use grid; individual card interiors mostly use flex column stacks inside their grid cells.

Demo 05 (Dynamic Data Grid) and Demo 16 (Dashboard Skeleton) are the reference implementations for modern SaaS dashboards. The pattern: an outer grid with grid-template-columns: repeat(12, 1fr) for the widget rail, and each widget spans grid-column: span N where N maps to its width tier — a KPI tile is span 3, a chart is span 6, a full-width activity feed is span 12. Widgets place with grid-auto-flow: dense so smaller tiles backfill holes when the layout wraps on medium screens. For the sidebar-nav shell wrap that outer widget grid in a two-column parent: grid-template-columns: 240px 1fr for the sidebar + main split, with @media (max-width: 768px) { grid-template-columns: 1fr; } to collapse the sidebar to a drawer on mobile. Linear, Notion, Vercel, Figma, Stripe Dashboard, and Airtable all ship variants of this exact recipe. Widget contents use nested flexbox for the label + value + delta arrangement so text metrics align across widgets.

Demo 13 (Pinterest Masonry) is the reference. Two approaches ship in the collection: (1) the traditional CSS columns approach — columns: 4 200px; column-gap: 12px; on a container and each item break-inside: avoid — which is Baseline everywhere and works today. Items fill top-to-bottom, then left-to-right (reading order breaks if that matters — check with a screen reader). (2) The newer grid-template-rows: masonry (Firefox has it behind a flag; Chrome + Safari have it as grid-template-rows: masonry in draft) — better reading order preservation but not Baseline-safe yet, so the demo ships CSS columns as the production path with a commented-out masonry rule as the forward-compat opt-in. For the CSS columns approach, if you need reading order to match visual order (accessibility + SEO signal for a portfolio), you have to reorder the DOM to match how columns pack items, which is exactly the trade-off masonry-grid was supposed to solve. Pinterest itself uses a JS-driven layout for exactly this reason; a CSS-only masonry is a good fit when reading order can be visual-column-major (photo galleries, illustration portfolios, mood boards).

Demo 15 (Subgrid Card) is the reference. The problem: a row of feature cards where each card has a title + body + footer, and you want the footers to align across all cards no matter how long each card's body is. Without subgrid, the footer position drifts because each card is its own independent flex/grid context. With subgrid: the OUTER container declares grid-template-rows: auto 1fr auto (title / body / footer tracks), and each CARD sets display: grid; grid-template-rows: subgrid; grid-row: span 3 — which makes the card's INNER rows lock onto the OUTER grid's row tracks. Every card's title-row aligns with every other card's title-row; body-rows flex together; footer-rows anchor at the same y-coordinate. Baseline widely-available (Chrome 117+, Safari 16+, Firefox 71+). This is the pattern shadcn card grids, Linear dashboard tiles, and every serious pricing table converges on — before subgrid, you'd either hardcode heights (broke on i18n) or use JS to measure and equalize (broke on hydration).

Demo 03 (Responsive Media Gallery) is the closest match — an repeat(auto-fit, minmax(240px, 1fr)) grid that wraps at any container width without media queries. For a full e-commerce product grid you'd nest inside each grid cell: an aspect-ratio: 4/5 media wrapper (product image), a title + price row (flex row with justify-content: space-between), a badge column (Sale / New / Bestseller), and a hover Add-to-Cart CTA that appears via :has(:hover). Shopify Dawn, WooCommerce Storefront, BigCommerce Stencil, Amazon product tiles, and Stripe Checkout item lists all use variants of this pattern. Combine with Demo 12 (Quantity Query) to change the visual density based on how many products are on screen: ul:has(> li:nth-child(4)) switches to a 4-column layout only when 4+ products exist; smaller counts get bigger tiles. This is the modern replacement for the JS-driven 'if fewer than 4 items, use different template' logic every e-commerce theme used to ship.

Use LOGICAL properties everywhere instead of physical ones — every demo in this collection follows this rule. Physical: margin-left, padding-right, left: 0, border-right-width. Logical: margin-inline-start, padding-inline-end, inset-inline-start: 0, border-inline-end-width. Grid tracks: use grid-column: 1 / -1 for spanning (works in both directions) instead of grid-column-start: 1. Sizing: inline-size / block-size instead of width / height when you're expressing 'the reading direction' vs 'the block direction' (they map to width/height in LTR and swap in RTL). Padding: padding-block and padding-inline. Set dir='rtl' on the root and the entire layout mirrors automatically — no per-selector overrides needed. The one gotcha: transform-based decorations (translate, rotate) don't auto-flip; wrap those in @media (dir: rtl) or explicit RTL selectors if the visual should mirror.

Grid is friendlier than flexbox for CLS because every track can be sized deterministically at CSS resolution time, before content loads. Three rules: (1) Use aspect-ratio on media slots (Demo 19 Aspect-Ratio Tiles) so image containers reserve their height before the img loads — CLS penalty vanishes. (2) Use minmax() with a MIN large enough to fit your smallest realistic content but not so large it wastes space; e.g. minmax(240px, 1fr) for product cards, minmax(320px, 1fr) for dashboard widgets. (3) Avoid grid-auto-rows: auto when row heights depend on async data — pin them with grid-auto-rows: minmax(96px, auto) so the row reserves at least 96px even when data is still loading. Combine with the shimmer skeleton loader pattern (see CSS Shimmer Skeleton Cards) for zero-CLS async grids: the skeleton reserves the exact grid cell dimensions, then the real content swaps in without any reflow. Google's Core Web Vitals docks pages with CLS > 0.1; the aspect-ratio + minmax + shimmer combo keeps CLS at 0.

Yes — every demo is framework-agnostic HTML + CSS. Copy the HTML into a component (JSX / template / .svelte), lift the CSS into a <style> block, CSS Module, or scoped section. Next.js App Router: the layouts sit naturally in a layout.tsx file with <main> hosting the grid children. React Server Components: no hooks needed since these are pure CSS. Vue / Nuxt: drop into any <template> with scoped styles. Svelte / SvelteKit: works in a +page.svelte or +layout.svelte. Astro: paste directly into an .astro file's template. The class prefix .cgl-NN is per-demo scoped so you can drop multiple demos into the same project without collision. Because the layouts are pure CSS (no useEffect, no requestAnimationFrame, no state), you avoid the class of 'grid doesn't render server-side' bugs that plague JS-driven layout libraries — every demo works at first paint, no hydration required.