Back to docs

Recipe: Card grid layout

Six production-ready card grid patterns built with Tailwind CSS. Copy, paste, and adapt to your data.

Bento

Asymmetric grid with varying spans

Masonry

CSS columns-based waterfall layout

Equal height

Flexbox cards with stretch alignment

Overlap

Negative margin layered card stack

Sidebar + grid

Filter sidebar with responsive grid

Featured first

Hero card spanning full width

Quick start

Every pattern uses the same base grid. Swap the column count and gap to match your design tokens.

<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
  {cards.map(card => (
    <Card key={card.id} {...card} />
  ))}
</div>