15 hand-coded CSS card grid layouts for blog archives, product shelves, testimonial walls, and dashboards — auto-fit responsive blog archive, asymmetric bento, equal-height product shelf, fluid Pinterest-style masonry, team directory, 3D hover-flip grid, stratified bento with duotone tiles and hover wipe, editorial tabloid bento with newsprint masthead + TOC + pull-quote ribbon, use-case showcase grid with 4 wireframed browser archetypes, Stripe-style pricing comparison with featured Pro tier and Most Popular ribbon, Vercel-style testimonial wall with 2×2 hero quote, Airbnb-style hero photo collage with location pills, 6-card KPI dashboard with pure-CSS sparklines and delta arrows, featured-article magazine grid with 1 hero story plus 4 category-coded supporting cards, and a Liquid Glass bento grid with per-tile refraction rims — Apple iOS 26 / macOS Tahoe aesthetic where hero tiles get pronounced lensed edges over a mesh backdrop. Every layout renders in a semantic <section> with a single <h2> and WCAG 2.5.5 44×44px touch targets on every interactive — the composition Baymard grid-page research validates for scannable above-the-fold content. Scoped under .cg-NN for no-collision pasting, prefers-reduced-motion guarded on every animated grid, framework-agnostic (Tailwind arbitrary values + React / Vue / Next mappings documented per demo).
Related20 CSS Cards18 CSS Product Cards33 CSS Card Hover Effects20 CSS Blog Layouts
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
Published
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) on the grid container. The browser takes the available container width, divides by the 280-pixel minimum to compute how many columns will fit, then stretches each track to share the leftover space equally via the 1fr portion. When the viewport shrinks past the point where 4 columns can fit, the layout collapses to 3 columns; shrink further and it collapses to 2, then 1 — automatically, with no breakpoint code. The minimum value is the only design lever you tune. Set it to 240px for a denser archive feel, 320px for editorial spacing, 360px for marketing brochure layouts. Pair it with gap: 28px for breathing room and you have the entire layout in three CSS declarations. Demo 01 (Auto-Fit Blog Archive Grid) ships the canonical recipe with badge overlays, 16:9 media boxes, and a clamp-sized headline that never overflows narrow tracks. Use auto-fill instead of auto-fit if you want empty tracks preserved at small item counts rather than collapsed to zero width — useful for pagination placeholders.grid-template-areas or explicit grid-column: span N / grid-row: span N on individual cards. Define a parent grid with grid-template-columns: repeat(4, 1fr) and grid-auto-rows: 180px, then on the hero card apply grid-column: span 2; grid-row: span 2 to make it occupy a 2x2 area; smaller cards take their default single cell. The browser auto-places remaining cards into the gaps. On mobile, switch the grid to grid-template-columns: 1fr so every card stacks vertically full-width. Demo 02 (Asymmetric Bento Box Feature Grid) ships a 6-card pattern with a hero feature, two medium tiles, and three quick-link tiles — the layout is roughly 100 lines of CSS with zero JavaScript. Bento grids broke into mainstream design via Apple's 2023 keynote slides and have since become the dominant marketing feature-grid pattern.display: flex; flex-direction: column, then give the variable-length region (description text) flex: 1 so it absorbs the height difference, leaving the CTA button pinned to the bottom regardless of card content length. This is the universal pattern that works in every browser since 2017. (2) **CSS Grid align-items: stretch** (the default) — when cards are direct grid children, they automatically stretch to match the tallest sibling in the row. Combined with option (1) inside each card, the row aligns AND the button stays bottom-flush. (3) **Subgrid** (Safari 16+, Firefox 71+, Chrome 117+) — declare the parent grid with named row tracks like grid-template-rows: auto 1fr auto auto (header, body, price, button), then on each card use display: grid; grid-template-rows: subgrid; grid-row: span 4 so the card inherits the parent's row sizing and every section of every card aligns perfectly across the row. Demo 03 (Equal-Height Product Grid) ships pattern (1) + (2) for universal browser support; the subgrid technique is shown in the customization notes as a 2026-grade upgrade.column-count / column-width plus break-inside: avoid gives you authentic flowed masonry in zero lines of JavaScript. The wrapper declares column-width: 240px; column-gap: 16px, the browser computes the number of columns the way auto-fit does, then flows children top-to-bottom column-by-column. Each card gets break-inside: avoid so the browser does not slice a card across column boundaries. The result is the classic Pinterest waterfall with variable card heights flowing into the shortest column automatically. The trade-off versus a JS library: CSS columns flow vertically (top-to-bottom, then left-to-right) so the visual reading order is column-first rather than row-first, which can feel slightly off for ordered content like a chronological blog feed but is perfect for unordered galleries. A second pure-CSS approach uses CSS Grid with grid-auto-flow: dense and varied grid-row: span N values, but it needs a known row count per card. Demo 04 (Fluid Masonry Card Grid) ships the column-count pattern with photo tiles at different aspect ratios. The native CSS masonry-layout value for grid-template-rows is shipping in Chrome and Firefox behind a flag and will replace both techniques cleanly when it lands in 2027.repeat(auto-fit, minmax(220px, 1fr)) — the same auto-fit technique as a blog archive — and each card is a flex column with align-items: center so avatars stay centered when cards stretch to fill wider tracks. The avatar typically uses aspect-ratio: 1; border-radius: 50% for circular treatment, or border-radius: 24px for a softer rectangular treatment used by modern SaaS marketing sites. Role kickers go in text-transform: uppercase; letter-spacing: 0.1em to read as labels rather than body copy. Demo 05 (Team Directory Face Grid) ships the complete recipe with avatar gradients, role badges, and a clean 4-up at desktop / 2-up at tablet / 1-up at mobile breakdown via pure auto-fit. The same pattern works for testimonials, advisor lists, alumni directories, and contributor walls.perspective: 1000px which establishes the 3D viewing frustum every card will rotate inside. Second, each card has an inner transform-style: preserve-3d container that holds two stacked faces (front and back), each absolutely positioned with backface-visibility: hidden so only the currently-facing side renders. Third, the outer card gets transition: transform 0.6s and on hover applies transform: rotateY(180deg) to flip the inner container. The front face shows whatever your card normally displays (icon, title, summary); the back face is pre-rotated 180 degrees so it appears the right way up after the parent flip. Total CSS: about 40 lines for the whole grid. Demo 06 (3D Hover-Flip Card Grid) ships a 4-card metrics dashboard where each tile flips to reveal a specific numeric stat — exactly the pattern Stripe, Linear, and Vercel use on their marketing pages. The first card stays flipped at idle so visitors can immediately see what the back face looks like without needing to hover.col-md-4, Tailwind exposes grid-cols-3, Material UI exposes a JSX display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), grid-template-areas, grid-column: span 2 — so you can paste it into any project regardless of CSS framework. It works in plain HTML, Astro, Next.js, SvelteKit, Eleventy, Webflow, Squarespace embeds, or alongside Bootstrap and Tailwind without conflicts. Each demo is roughly 60-120 lines of CSS, fully scoped under .cg-NN, zero JavaScript, and the techniques shown (auto-fit minmax, named grid areas, subgrid alignment, column-count masonry, perspective + rotateY flips) are the exact patterns that production sites at Stripe, Vercel, Linear, Apple, and Notion use. Owning the CSS means you can tune it; using a framework grid means you accept its defaults.
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).
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.
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.