37 CSS Layout Examples — Free Page Templates & Structural Patterns
A solid layout is the foundation of every well-built interface. This collection covers every major CSS layout pattern — grid, flexbox, hero sections, dashboards — with real examples and copy-paste code.
Build layouts like this from scratch: CSS Grid templates, areas & responsive design
ZTM · Fundamentals of CSS Grid · 30‑day money-back guarantee · Affiliate link
Layout Techniques
13 collections
5 Tailwind CSS Ways to Center Div
5 Tailwind CSS ways to center a div: flexbox with items-center and justify-center for both axes, grid place-items-center in two classes, absolute positioning with inset-0 or translate over a glass UI, mx-auto with a max-w container for inline-axis centering, and a side-by-side board comparing all six methods with their trade-offs.
30 Tailwind CSS Grid Layouts
30 Tailwind CSS grid layouts for editorial features, docs pages with sticky tables of contents, photo galleries, bento product sections, analytics dashboards, pricing tables, and kanban boards — spanning holy-grail and 12-column page systems, masonry and mosaic photo walls, subgrid-aligned cards, container-query teasers, scroll-snap carousels, and dense auto-packed asset libraries. Scoped under .tgx-NN for no-collision pasting, prefers-reduced-motion, guarded, framework-agnostic.
15 Tailwind Card Grid Layouts
Browse 15 CSS Tailwind card grid layouts with live demos and copy-paste code. Auto-fit blog archives, masonry walls, bento boxes, pricing grids. Mobile-first.
15 CSS Aspect Ratio Demos
15 hand-coded CSS aspect-ratio demos for video embeds, product galleries, IAB ad slots, native dialogs, and CLS-safe placeholders: 16:9 iframe YouTube embed with click-to-load facade + up-next rail, 21:9 full-screen hero video with min-height/max-height:100svh guardrails + Ken Burns drift, 1:1 Instagram-style square grid with 2×2 feature tile, 4:3 magazine card image cover, 9:16 vertical stories rail (TikTok/Reels/Shorts pattern) with scroll-snap + segment bars, 4:5 apparel product image gallery with radio-driven state + 1:1 thumbnails, 1:1 zoom thumbnail carousel with pointer-tracked --zx/--zy magnifier, prevent-layout-shift placeholder with live PerformanceObserver CLS meter (before/after side-by-side lab), dynamic content fallback with three policies (bend/strict/auto) via :has() toggle, IAB ad banner slots (728×90 leaderboard, 300×250 medium rectangle, 300×600 half-page, 320×50 mobile) with skeletons + container-query mobile swap, responsive modal dialog sized min(92vw, 88svh×16/9, 1080px) with @starting-style animation, responsive OpenStreetMap iframe wrapper with 16:9 → 1:1 container-query narrow swap, media query orientation live HUD + resize:both container-ratio playground, object-fit logo cloud with contain/cover/fill switcher via :has(), and side-by-side padding-top hack (height:0 + padding-top:56.25%) → modern aspect-ratio migration comparison with live ratio picker. 11 truly Pure CSS + 4 with a tiny optional vanilla JS snippet (facade swap, pointer magnifier, CLS meter, native dialog). Every demo is scoped under a unique .car-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
17 CSS Sticky Elements
17 hand-coded CSS position:sticky demos covering every real-world sticky use case: sticky header on scroll, sticky header that changes background when scrolled (via scroll-state() container queries), sticky shrinking navbar with animation-timeline: scroll(), stacked sticky header + secondary tabs with :has(:target) scrollspy, sticky sidebar inside flexbox with align-self:flex-start, sticky Table of Contents with IntersectionObserver scrollspy + scroll-driven progress bar, iOS-contacts sticky section headers with alphabet rail, sticky chapter card stack with view() timeline entrances, sticky table header inside scrollable div, sticky first column + header with correct z-index corner cell (Airtable/Retool/Metabase pattern), mobile sticky add-to-cart bottom bar with safe-area-inset, sticky floating promo banner with :has(:checked) dismiss, sticky checkout order summary sidebar, sticky footer to bottom of short pages via grid auto/1fr/auto, sticky social share rail (desktop-left / mobile-bottom via container query), a debug lab showing why sticky breaks when an ancestor has overflow:hidden (vs overflow:clip), and a stuck-state detection sensor using both scroll-state(stuck: top) AND IntersectionObserver sentinel fallback. 15 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every sticky is scoped under a unique .cst-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
12 CSS Masonry Layouts
12 hand-coded CSS masonry layouts covering the three canonical engines (multi-column `columns:` walls, CSS Grid row-span lattices, CSS Grid dense auto-flow packing, flex column-wrap boards) plus the W3C native masonry spec with layered @supports fallbacks. Every real-world masonry use case: Pinterest-style image walls, `<dialog>`-element lightbox galleries, responsive photo grids with grid-row spans preserving reading order, blog card walls with column-span editor's-pick spans, e-commerce product listings with dense packing + feature tiles, flex column-wrap horizontally-scrolling social feeds, art-directed portfolio showcases with :has() spotlight, testimonial walls with mask-image fade + scroll-driven reveal, mixed-ratio video thumbnail galleries, quantized dashboard widget grids on 108px lattices, IntersectionObserver-append infinite scroll walls with aria-live, and the modern @supports (grid-template-rows:masonry) / display:masonry cascade with live badge showing engine status. 10 truly Pure CSS + 2 with a tiny optional vanilla JS snippet (lightbox dialog + infinite-scroll append). Every wall is scoped under a unique .msn-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
16 CSS Two-Column Layouts
16 hand-coded CSS two-column layout templates covering every real-world pattern developers need: flexbox 68/32 content+sidebar, CSS Grid stacked mobile-to-desktop responsive, fixed-left/fluid-right dashboard, exact 50/50 marketing split, two-column form checkout, sticky-sidebar docs, edge-to-edge split-screen hero, equal-height cards, hero+content header, floated legacy pattern, magazine article layout, pricing table with Pro plan elevated, product-card grid, auto-width sidebar via minmax, and pure margin/inline-block without flexbox or grid. Copy-paste HTML and CSS, WCAG 2.2 accessible, mobile-first, prefers-reduced-motion guarded, framework-agnostic.
30 CSS Grid Layouts
30 hand-coded CSS grid layouts — full-bleed article, sticky sidebar, responsive media gallery, modern holy grail, dynamic data grid, card stack overlay, plus 24 field-tested patterns (12-column, bento, magazine editorial, RAM auto-fit, quantity queries, Pinterest masonry, subgrid, dashboard, pricing, kanban, container queries, and more). Pure CSS, semantic HTML, RTL-ready via logical properties, copy-paste.
6 CSS Bento Grid Layouts
6 production CSS bento grid layouts with 12 hand-coded designs — Apple-style product showcase, SaaS feature value-prop matrix, analytics dashboard overview, creative portfolio, e-commerce category hub, and link-in-bio social hub. Each topic ships 2 sub-variants side-by-side so visitors see both a keynote aesthetic and a paper-doc variant at once. Container queries, CSS Grid, zero dependencies, copy-paste ready.
15 CSS Card Grid Layouts
Card grids for blog archives, SaaS dashboards, pricing pages, and product catalogs, plus editorial and bento layouts. Covers auto-fit grids that add and drop columns via repeat(auto-fill), asymmetric Apple-style bento boxes, Pinterest-style fluid masonry, equal-height product cards, KPI dashboard tiles, three-tier pricing comparisons, testimonial walls, team directories, 3D hover flip cards, and glass bento tiles.
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.
5 CSS Ways to Center a Div
5 hand-coded CSS ways to center a div: Flexbox with align-items and justify-content for both axes, CSS Grid place-items in one line and a 3×3 named-template track, absolute positioning with top/left 50% plus translate over a glassmorphism UI, margin:0 auto and the logical margin-inline:auto for inline-axis centering, and a side-by-side board comparing Flexbox, Grid, Absolute+Transform and table-cell with their trade-offs.
20 CSS Container Queries
20 hand-coded container query patterns that treat the query mechanism as the subject rather than a side effect of a layout. Starts with the core mechanics — container-type on the ancestor, the full cq unit family from cqi and cqw through cqmin and cqmax, named containers with container-name, and a card component that restyles itself from the width of the slot it lands in. Then the concepts: how container queries differ from media queries and where each still belongs, style queries that read a custom property instead of a size, scroll-state queries for stuck and scrollable and snapped, fluid type sized from the container rather than the viewport, and widget resizing. Then the reflow patterns people actually build — product grids, media objects, forms, navigation and tables that become cards. Closes with the advanced surface: progressive enhancement, nested container contexts, the infinite-loop trap that has no media query equivalent, combining queries with CSS Grid, and the five reasons a container query silently does nothing.
Landing Page Sections
14 collections
22 Tailwind CSS Feature Sections
22 hand-coded Tailwind CSS feature sections for SaaS marketing pages, developer tools, and enterprise landing pages. Covers tabbed product tours, alternating image rows, stat counters, problem-vs-solution splits, integration logo grids, accordion feature cards, plan comparison columns and tables, security compliance badges, API code blocks, sticky scroll storytelling, icon and bento grids, dark glassmorphism, scroll-reveal cards, 3D tilt cards, phone mockups, and vertical timelines.
31 Tailwind CSS Hero Sections
31 hand-coded Tailwind CSS hero sections for SaaS marketing pages, developer tools, mobile app launches, e-commerce product drops and editorial magazine covers. Covers split layouts with dashboard mockups, animated gradient mesh and conic-ring backgrounds, glassmorphism aurora cards, staggered word and kinetic-letter reveals, bento grids, before/after comparison sliders, parallax landscapes, terminal windows, brutalist and neon-cyberpunk styles, starfields, glitch text and mouse-tracking liquid-glass lenses.
12 Tailwind CSS Full Page Sections
12 Tailwind CSS full-page section layouts for SaaS landing pages, product feature showcases, portfolios, and agency storytelling sites. Covers scroll-snap full-viewport panels sized with 100dvh, a JavaScript-free one-page scroller, scroll-snap-stop to prevent skipping, sticky stacking cards, frosted dot-rail navigation, scroll-spy active links without JavaScript, parallax and reveal-and-scale scroll-driven animations, horizontal scroll-snap chapters, and an accessible keyboard-navigable variant with reduced-motion support.
22 Tailwind CSS Headers
22 Tailwind CSS headers for SaaS apps, docs sites, storefronts, and marketing pages. Covers command-palette search with a ⌘K shortcut, workspace and version switchers, e-commerce cart and mega-menu clusters, sticky and shrinking scroll headers, a reading-progress bar, transparent-over-hero and glassmorphism surfaces, notification dropdowns, breadcrumb and two-row layouts, a collapsible sidebar, multi-level dropdowns, a full-screen hamburger overlay, a dismissible announcement bar, and five nav-link hover styles.
14 Tailwind CSS Wave Section Dividers
Restaurant menu cards, SaaS and agency landing-page heroes, and dark-footer transitions all lean on wave section dividers to soften the seam between two colour blocks. This set covers inline SVG paths, reusable masks, seamless animated tiles that scroll sideways, clip-path cuts with no SVG at all, stacked multi-colour layers, inverted concave dips, sine-accurate curves, gradient-masked edges, asymmetric organic shapes, dark-mode colour matching, photo overlays, and a vertical seam for sidebars — plus the responsive mobile-gap fix.
21 Tailwind CSS Pricing Sections
Pricing sections for SaaS marketing pages and product landing pages, spanning three-tier layouts, a highlighted popular tier, a full feature comparison table, and single-product premium cards. Includes zero-JS monthly/yearly and currency toggles, a usage-slider estimator, per-seat and pay-what-you-want calculators, bento and timeline arrangements, feature accordions built on details, plus glass, brutalist, synthwave, conic-border, and cursor-spotlight treatments.
22 CSS Feature Sections
22 hand-coded CSS feature section patterns — tab-switcher product tour, alternating image rows, live metric counters, problem vs solution split, autoplay product video, integration logo strip, accordion feature cards, three-tier feature parity, security and compliance badges, API code response split, customer quote per feature, sticky-scroll storytelling, icon grid, bento asymmetric, dark glassmorphism, scroll reveal, code preview, comparison matrix, SaaS grid, 3D perspective cards, floating phone mockup, and vertical timeline.
22 CSS Headers
Command Palette header with ⌘K shortcut, docs header with version switcher and search, SaaS app-shell header with workspace picker, and e-commerce header with cart, wishlist, and account cluster. Covers sticky scroll-timeline headers, glassmorphism backdrop-filter bars, transparent-over-hero landings, CSS Grid mega menus, multi-level dropdowns, full-screen overlay hamburger nav, reading-progress meters, shrink-on-scroll, and a dismissible announcement bar.
25 CSS Footer Designs
25 hand-coded CSS footer designs for SaaS marketing pages, e-commerce storefronts, agency portfolios, documentation sites, mobile apps, and local business sites. Sticky footer with flexbox and CSS grid, responsive 4-column category-link footer, SaaS mega footer with resource grid, minimalist logo + copyright, e-commerce footer with payment icons and security badges, dark mode toggle footer, local-business footer with embedded Google Maps and office hours, mobile-first collapsible accordion, social media follow icons, SaaS SOC 2 / GDPR / HIPAA compliance badge footer, animated gradient background, newspaper masthead multi-column, full-width newsletter signup, card layout with contact details, monospaced developer portfolio, audio player music website, dark mode glowing neon, centered minimalist blog, multi-column mega grid, integrated contact form + map, trust badges + guarantee icons, accordion FAQ, pre-footer call-to-action bar, multi-language + currency selector, and animated SVG wave. 16 Pure CSS + 9 Light JS. Every design scoped under .ft-NN prefix for no-collision pasting, prefers-reduced-motion guarded per WCAG 2.3.3, framework-agnostic (React, Vue, Svelte, Astro, Next.js, Nuxt, Remix, SvelteKit).
14 CSS Wave Section Dividers
14 hand-coded CSS wave section dividers — SVG waves, clip-path polygons, gradient masks, animated sine, inverted curves, stacked multi-color, gradient background masks, asymmetrical organic, dark-mode color match, animated transitions, image overlays, and vertical seam variants. Zero dependencies, CLS-safe, prefers-reduced-motion guarded, framework-agnostic.
21 CSS Pricing Sections
Classic three-tier SaaS layouts, a highlighted "most popular" tier, and a real feature comparison table with sticky headers sit alongside interactive pricing: a pure-CSS monthly/yearly toggle and currency switcher built on hidden radios and :has(), a usage-slider estimator, per-seat calculator, and pay-what-you-want chips. Also single premium cards, bento and vertical-timeline arrangements, feature accordions on details/summary, plus glass aurora, brutalist print, synthwave neon, 3D tilt, conic-border, and cursor-spotlight treatments.
31 CSS Hero Sections
31 hand-coded CSS hero sections — SaaS product mockup, B2B split-column, gradient mesh, glass over aurora, terminal dev, Memphis animated shapes, social-proof with press logos, bento grid, before/after slider, parallax mountain, 3D card stack, particle starfield, glitch RGB, conic orbit, and a Liquid Glass mouse-tracking refraction hero whose cursor-following lens magnifies and warps the headline beneath it (Apple iOS 26 / macOS Tahoe aesthetic). No images, no dependencies, copy-paste ready.
12 CSS Full Page Sections
12 hand-coded full-page scroll sections for product tours, portfolios, and one-page marketing sites. Covers native scroll-snap panels that need no JavaScript at all, the 100dvh fix for mobile address bars that jump the layout, scroll-snap-stop to stop fast flicks skipping sections, sticky stacking panels that pin and overlay, scroll-driven parallax backgrounds, reveal-and-scale transitions, sticky dot navigation, scroll-spy link state, horizontal full-screen sliders, and a keyboard-accessible build that degrades cleanly under reduced-motion.
20 CSS Diagonal Sections
20 hand-coded CSS diagonal sections for SaaS landing pages, agency sites, and product marketing. Covers clip-path polygon bands, the skewY technique with counter-skewed content, angled heroes with CTAs, sloped pricing and testimonial bands, diagonal footer transitions, asymmetric and stepped edges, rounded angle corners, scroll-animated clip paths, parallax backgrounds, and inline SVG diagonal edges that stay crisp at any viewport width. Includes the two builds people search for when the technique breaks: the responsive fix for angles that go steep on mobile, and the z-index stacking order that stops content vanishing under a neighbouring band.
Page & App Layouts
10 collections
18 Tailwind CSS Settings Pages
18 hand-coded Tailwind CSS settings pages for SaaS dashboards, billing, and team administration. Covers section-nav account layouts, plan and seat billing summaries, usage quota meters with conic-gradient rings, invoice history tables, payment-method cards, roles and permissions matrices, teammate invite flows, API key management, two-factor setup, active-session lists, notification preference grids, theme panels, connected-app directories, data export, audit logs, and danger-zone delete sections.
18 CSS Settings Pages
18 hand-coded CSS settings pages for SaaS dashboards, billing and team administration. Covers section-nav account layouts, plan and seat billing summaries, usage quota meters, invoice tables, payment-method cards, roles and permissions matrices, teammate invite flows, API key management, two-factor setup, active-session lists, notification preference grids, theme panels, GDPR data export and danger-zone delete sections.
17 Tailwind CSS Dashboard Layouts
17 hand-coded Tailwind CSS dashboard layouts for SaaS admin panels, analytics consoles, e-commerce merchant dashboards and AI copilot apps. Covers bento grids, collapsible icon-rail sidebars, KPI stat-card grids, master-detail inbox splits, fixed-header independent scroll panels, grid-template-area shells, off-canvas drawers, container-query cards, dark/light/system toggles, multi-level nested navigation, sticky-header data tables, masonry column packing, full-screen 100vh consoles and top-nav tab bars.
30 Tailwind CSS Sidebar Layouts
30 Tailwind CSS sidebar layouts for SaaS dashboard shells, admin consoles, documentation trees, and webmail two-pane inboxes — spanning fixed and sticky rails, collapse-to-icon and off-canvas drawers, dual-panel and three-pane workspaces, nested <code><details></code> file trees, and floating glassmorphism panels. Scoped under <code>.tsl-NN</code> for no-collision pasting, <code>prefers-reduced-motion</code> guarded, framework-agnostic.
20 CSS Blog Layouts
20 hand-coded CSS blog and editorial layouts for magazine homepages, news sites, personal archives, newsletter back-issues, recipe and podcast blogs, developer tutorials, and long-form journalism. Covers a magazine homepage with hero plus editor-picks rail, a news homepage with breaking-news ticker, blog archives with sticky year separators, Substack-style issue-numbered archives, recipe card grids with prep-time badges, podcast episode lists with waveforms, long-form articles with scroll-driven reading progress, drop caps and floated pull quotes via first-letter, Medium-style 65ch centred reader layouts, dev tutorials with a sticky code panel beside prose, interview transcripts with alternating speakers, case-study pages with stat counters, video blogs with an episode rail, full-bleed photo essays, news articles with sticky related-stories sidebars, documentation pages with prev/next chapter nav, a standalone blog post card, a scroll-snap category filter bar, an inline newsletter callout that breaks out of the prose column, and a horizontal featured-post rail. 12 are pure CSS with zero JavaScript. Every layout is scoped under a .bl-NN prefix for no-collision pasting, guards prefers-reduced-motion, and ports unchanged to React, Vue, Svelte, Astro, Next.js and Tailwind.
16 CSS Portfolio Layouts
16 hand-coded CSS portfolio layouts covering the exact patterns freelance developers, UX/UI designers, product designers, illustrators, photographers and agency teams actually ship for their own portfolio sites: responsive CSS-Grid galleries with fr tracks and auto-fit minmax, Apple-style bento grids, no-JS native masonry walls, sticky-sidebar flexbox splits, hover-overlay project grids with staggered scrims, scroll-snap horizontal showcases, 50/50 split-screen heroes with :has() accent recoloring, dark-mode CSS-variable token systems, single-page developer portfolios with anchor navigation and scroll-timeline progress rails, UX case-study articles with 1fr/62ch/1fr content grids, ultra-minimalist graphic-design indexes with clip-path thumb reveals, freelancer layouts with testimonials plus 3-tier pricing, beginner-friendly auto-fit card grids, 3D card-flip project tiles, full-screen 100svh hero openers with view()-timeline parallax and sticky header+sidebar app-shell templates. 14 truly Pure CSS + 2 with a tiny optional vanilla JS snippet. Every portfolio is scoped under a unique .cpl-NN prefix so it drops into any project without CSS collisions, ships prefers-reduced-motion guards on every animation, and is framework-agnostic (works as-is in React, Vue, Svelte, Astro, Next.js, Remix, or plain HTML).
17 CSS Dashboard Layouts
17 hand-coded CSS dashboard layouts for SaaS admin panels, analytics consoles, e-commerce merchant dashboards and AI copilot apps. Covers CSS Grid bento boards, collapsible icon-rail sidebars, auto-fit KPI card grids, split-pane master-detail views, fixed-header independent scroll panels, grid-template-areas shells, off-canvas mobile drawers, container-query responsive cards, dark mode CSS variable tokens, multi-level nested navigation, sticky-header data tables, masonry column packing, full-screen 100vh consoles and top-nav tab bars.
22 CSS Split Screen Layouts
22 hand-coded CSS split-screen layouts — classic 50/50, diagonal clip-path, hover-reveal grid, before/after slider, sticky-scroll storytelling, 3D perspective. Semantic HTML, WCAG 2.2 focus rings, prefers-reduced-motion guards, framework-agnostic.
30 CSS Sidebar Layouts
30 CSS sidebar layouts for SaaS dashboards, admin panels, documentation trees, webmail two-pane inboxes, and e-commerce filter rails — spanning fixed and sticky app shells, icon-collapse and mini-rail navigation, off-canvas and push drawers, dual-sidebar and three-pane workspaces, glassmorphism floating panels, nested details trees, resizable and container-query adaptive layouts, and pure-CSS checkbox and target toggles.
32 CSS Timelines
32 hand-coded CSS timeline layouts — GitHub-style commit history, CI/CD deploy pipelines, resume with CSS subgrid, order tracking, activity feeds, product roadmaps, SaaS changelogs, Gantt charts, conference agendas, scrollytelling, scroll-driven reveals, and 21 more field-tested patterns. Copy-paste ready.