15 Tailwind card grid layouts — auto-fit and multi-column archives, asymmetric and glass bento boxes, equal-height product and pricing grids, masonry and photo-collage walls, testimonial and team directories, KPI dashboards, magazine features, and 3D hover-flip decks. Scoped under .tcg-NN for no-collision pasting, prefers-reduced-motion guarded, framework-agnostic.
Building a whole Tailwind app, not just this component?
You just browsed 15 Tailwind card grid layout. Untitled UI Pro unlocks 5,000+ components and sections and 250+ page examples for React, styled with Tailwind CSS v4. One licence is a one-time $349 with lifetime updates; teams start at $999.
Six SaaS KPI cards — MRR, active users, churn, NPS, deploys, uptime — each with its metric, its delta and a sparkline drawn from flex-1 divs, no chart library and no SVG. The port's move is the per-card accent: style="--accent:#7c3aed" stays an inline custom property, and the accent bar, the border-on-hover and every sparkline bar read it back through bg-[var(--accent)].
A landing hero with narrative copy on the left and a five-tile asymmetric photo collage on the right. Every tile states its own placement — col-start-1 col-span-2 row-start-1 row-span-2 — so the collage rhythm is readable in the markup, and the readability overlay every photo grid ships is one after: chain instead of a pseudo-element block.
Three tiers, one featured, and every CTA on the same horizontal axis regardless of how many features a tier lists — because each card is flex flex-col with flex-1 on the list and mt-auto on the button. The featured tier's whole identity is five utilities: scale-104, a two-pixel accent border, a shadow, z-1, and max-[860px]:order-first.
Six customer quotes on a four-column wall, with one dark 2×2 hero quote anchoring it. The port's interesting part is the inversion: the featured card's dark treatment is a class group on one element (bg-tcg11-featbg text-tcg11-featink) and its children inherit, so the CSS version's six .card--featured .x descendant rules shrink to two text-* overrides.
A newsprint bento with a real masthead, a display-poster headline, an in-this-issue index with dashed leaders, a pull-quote ribbon and three section tiles — all inside one hairline-ruled 12-column grid. The port keeps every print convention and moves all twelve placement rules onto the tiles: col-span-full, col-span-8, col-span-4.
One hero story on the left, four stacked supporting cards on the right, and colour-coded category pills so the wall can be scanned by section — the hierarchy every news homepage converges on. Five per-category colours live in @theme, which is exactly the case for a token: one value, used by many elements, meaningful across the design.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A dark 4-column bento where one hero tile holds a 2×2 block and four smaller tiles flow around it, each ringed by a gradient hairline. The gradient border is the whole story of this port: two backgrounds, two clip boxes and a transparent border, expressed as one arbitrary bg-[…padding-box,…border-box] utility that reads its colour from a per-tile --glow.
Twelve tiles on a carmine canvas, each split by a hard-stop duotone gradient, and each carrying its inverse as a before: layer that wipes down on hover via clip-path: inset(). Every one of the CSS version's twelve placement rules moves onto its tile, so the bento's weighting is finally readable in the markup.
The alignment problem every catalogue has — titles of different lengths pushing the Add-to-Cart buttons out of line — solved in four utilities: items-stretch on the grid, h-full flex flex-col on the card, and mt-auto on the price row. The port's value here is that the contract is now visible on the elements that make it.
A Pinterest-style wall built on multi-column flow, which is still the only masonry that works everywhere. Tailwind has first-class utilities for the whole technique — columns-3, break-inside-avoid, gap-4 — so this is one of the few demos where the port is shorter than the CSS and nothing has to stay in the stylesheet.
The self-adjusting archive: one arbitrary track list, no media queries, columns appearing and disappearing as the container resizes. The port is a straight one-for-one, and it is the demo that best shows where the line falls — repeat(auto-fit,minmax(280px,1fr)) stays arbitrary, everything else becomes a utility.
A directory whose avatars break the top edge of their cards, done with the oldest trick in CSS: a negative top margin equal to half the avatar's height, over a card with matching top padding. In utilities the two numbers that must stay in sync (w-21 h-21 and -mt-12.5) finally sit on the same element.
A flashcard wall where hovering a tile rotates it 180° to reveal an accent-coloured back face of metrics, and the grid never shifts because only a transform animates. v4 ships perspective-*, transform-3d, backface-hidden and rotate-y-* as real utilities, so the entire 3D scene is expressible without touching the stylesheet.
Four cards, each a fully-drawn page archetype inside a browser frame — a photo gallery with a carousel and filmstrip, a contact page with labelled fields and an inline-SVG map, a five-column shop grid and a four-column team grid. Every one of those miniatures is nested Tailwind grids and flexbox, which makes this the demo that proves utilities scale down to a 12px-tall mock.
Newsletter
Enjoying these demos? Get new ones by email.
A short email when a new collection ships. Unsubscribe any time.
A liquid-glass bento over a slowly drifting conic mesh, where each tile sets its own refraction with an inline --edge — 0 for flat frosted panels, 1 for a pronounced lensed rim. The animation lives in @theme as --animate-tcg15-bg, which is how v4 mints an animate-* utility from a keyframe.
FAQ
Frequently asked questions
How do I build a responsive Tailwind card grid without any media queries?
The Auto-Fit Blog Archive grid does it with one arbitrary track list and no breakpoints. In Tailwind that's grid grid-cols-[repeat(auto-fit,minmax(16rem,1fr))]. The minmax(16rem,1fr) says every column is at least 16rem wide and at most one equal fraction of the row; auto-fit then packs in as many 16rem columns as the container allows and stretches them to fill. Widen the container and a new column appears, narrow it and columns drop away — all from a calculation the browser runs for free, with no @media rules to maintain. Swap auto-fit for auto-fill only when you want the empty track slots kept, so a short last row stays left-aligned instead of stretching to fill the width. Set the gutter with gap-6 and the archive reflows fluidly between one and four-plus columns.
Why do the buttons in my Tailwind product cards sit at different heights?
This is the alignment problem the Equal-Height Product Grid and the Pricing Comparison grid both solve. Grid already stretches every card in a row to the tallest card's height — that part is automatic under the default items-stretch. What isn't automatic is where the button lands inside the card, because a two-line title pushes it down while a one-line title leaves it high. Make each card a flex column with flex flex-col, then push the CTA to the bottom with mt-auto on the button, or let the description soak up the slack with grow. Now every Add-to-Cart and every pricing CTA sits on the same horizontal axis regardless of title length or feature count. The common mistake is forcing a fixed h-64 on the card — that clips long content. Let the row height come from the tallest sibling instead.
How do I build a Pinterest-style masonry card wall in Tailwind?
The Fluid Masonry grid uses CSS multi-column flow, still the only masonry that works in every browser today. In Tailwind that's columns-2 sm:columns-3 lg:columns-4 on the wrapper, then break-inside-avoid mb-6 on each card so a tile never splits across two columns. Cards keep their natural height and stack tightly, which is the whole point: a wall of mixed aspect ratios with no ragged bottom edge. The catch is reading order — multi-column fills top-to-bottom down column one, then column two, so the visual order is not the DOM order. That's fine for a photo gallery but wrong for anything sequential like ranked results. Native grid masonry via grid-template-rows: masonry preserves source order but isn't shipped widely enough to rely on, so column flow stays the safe default. Use gap-6 to set the column gutter.
How do I make one card span two columns and two rows in a Tailwind bento grid?
The Asymmetric Bento and Glass Bento grids build their hero tiles with explicit span utilities. Define the track count on the parent — grid grid-cols-4 — then give the feature tile col-span-2 row-span-2 so it occupies a 2×2 block while the smaller tiles flow around it. The bug everyone hits first: the tall tile doesn't actually get taller, because grid rows size to their content by default, so row-span-2 spans two short rows. Fix it by making the rows equal with auto-rows-fr, or an explicit grid-rows-*, which gives every row a 1fr height for the span to double. On narrow screens collapse to a single column with grid-cols-1 and drop the spans, or the hero tile overflows its track. Keep spacing consistent with one gap-4 on the parent rather than margins on individual tiles.
How do I make a team-card avatar overflow the top edge of its card in Tailwind?
The Team Directory grid does it with the oldest trick in CSS: a negative top margin. The avatar sits at the top of the card content and takes -mt-12, a little more than half its own height, which lifts it above the card's top border so it breaks the edge. Two things trip people up. First, if the card carries overflow-hidden — common when you're clipping a rounded corner or a background image — the overflowing half of the avatar gets clipped away; keep the card overflow-visible and clip the image with a separate inner wrapper instead. Second, give the avatar a ring in the card's own surface colour with ring-4 ring-white or your token, so it reads as sitting on top rather than merging into whatever is above. Add relative if a sibling needs to stack beneath it, and leave enough top padding for the name and role that follow.
How do I build a 3D hover flip card in Tailwind?
The 3D Hover Flip grid stacks two faces and rotates the whole tile. The outer card needs a perspective — [perspective:1000px] — and an inner wrapper carries [transform-style:preserve-3d] plus a transition. On hover you rotate that wrapper with group-hover:[transform:rotateY(180deg)], driven by a group class on the outer element. Both faces are absolutely positioned and stacked, each with [backface-visibility:hidden] so it hides when turned away; the back face starts pre-rotated with [transform:rotateY(180deg)] so it reads upright after the flip. The classic bug is the back face showing through mirror-reversed — that's a missing backface-visibility:hidden on one of the two faces. Give both faces absolute inset-0 and matching height, or the card collapses to zero height once the faces leave normal flow.
Are hover flip cards keyboard and screen-reader accessible?
Hover-only is the accessibility trap in the 3D Flip grid, and it applies to any hover-reveal card. A keyboard user tabbing through the wall never fires :hover, and a touch user has no hover at all, so anything living only on the back face is invisible to both. Two rules. First, never put essential information solely on the back — treat the flip as progressive enhancement over content already legible on the front. Second, make the flip focus-driven as well: add focus-within:[transform:rotateY(180deg)] alongside the hover variant, and put a real focusable element — a <button> or <a> — inside so the card can receive focus at all. Respect motion-reduce:transition-none so the rotation doesn't spin for users who asked for less motion. Screen readers read both faces in DOM order regardless of the visual flip, so keep that order sensible.
When should I not use an auto-fit grid for cards?
Reach for auto-fit only when the item count is genuinely variable, like the blog archive. It's the wrong tool for a fixed layout — the Pricing Comparison grid ships exactly three tiers, so grid-cols-3 collapsing to grid-cols-1 on mobile is clearer and never surprises you. Two failure modes worth knowing. With auto-fit, a single leftover item stretches to the full container width, which looks broken for one lone card; auto-fill keeps the empty tracks so it stays column-width. And minmax(16rem,1fr) can overflow its track when a card holds something unshrinkable — a long unbroken string or a wide image — because 1fr carries a min-content floor; switch to minmax(0,1fr) to let it shrink. For anything where the count and order are fixed and sequential, an explicit grid or even flex reads more predictably than letting the browser choose the column count.
