Six ways to lay out cards: an auto-fit blog grid, a two-column feature grid, a team grid, a shop grid with add buttons, masonry-style columns and a sideways snap-scrolling row.
Article cards in an auto-fit grid that goes from one to three columns on its own. Each whole card is a link with one clear heading, and the image placeholder keeps a fixed aspect ratio so rows line up.
Four feature cards in a two-column grid, each with an icon tile, a short title and one line of copy. The icons are decorative and the titles carry the meaning.
View code
<ul class="grid w-full max-w-xs grid-cols-2 gap-3">
<li class="rounded-xl bg-slate-800 p-3"><span aria-hidden="true" class="grid size-8 place-items-center rounded-lg bg-indigo-500/20 text-indigo-300">⚡</span><h3 class="mt-2 text-sm font-bold text-white">Fast</h3><p class="text-xs text-slate-300">Pages load in under a second.</p></li>
<li class="rounded-xl bg-slate-800 p-3"><span aria-hidden="true" class="grid size-8 place-items-center rounded-lg bg-emerald-500/20 text-emerald-300">🔒</span><h3 class="mt-2 text-sm font-bold text-white">Secure</h3><p class="text-xs text-slate-300">Encrypted from end to end.</p></li>
<li class="rounded-xl bg-slate-800 p-3"><span aria-hidden="true" class="grid size-8 place-items-center rounded-lg bg-amber-500/20 text-amber-300">🧩</span><h3 class="mt-2 text-sm font-bold text-white">Modular</h3><p class="text-xs text-slate-300">Use only the parts you need.</p></li>
<li class="rounded-xl bg-slate-800 p-3"><span aria-hidden="true" class="grid size-8 place-items-center rounded-lg bg-rose-500/20 text-rose-300">💬</span><h3 class="mt-2 text-sm font-bold text-white">Supported</h3><p class="text-xs text-slate-300">Real people answer email.</p></li>
</ul>
03. Tailwind Team Member Grid
TailwindCardsTeam
A team grid with initials avatars, names and roles, centred in each card. The grid uses grid-cols-3 with small cards, and long names truncate rather than break the layout.
A two-column shop grid with image, name, price and a small add button per product. The add buttons carry the product name in hidden text, so a list of identical Add buttons still makes sense to screen readers.
Cards of different heights flowing into two columns with columns-2, the simplest masonry. break-inside-avoid stops a card being split between columns, and mb- spacing replaces the gap a grid would give.
View code
<div class="w-full max-w-xs columns-2 gap-3">
<article class="mb-3 break-inside-avoid rounded-xl bg-amber-100 p-3 text-sm text-amber-950"><h3 class="font-bold">Short note</h3><p>Buy oat milk.</p></article>
<article class="mb-3 break-inside-avoid rounded-xl bg-sky-100 p-3 text-sm text-sky-950"><h3 class="font-bold">Trip ideas</h3><p>Lisbon in spring, Tromsø in winter, Kyoto for the gardens in autumn.</p></article>
<article class="mb-3 break-inside-avoid rounded-xl bg-emerald-100 p-3 text-sm text-emerald-950"><h3 class="font-bold">Books</h3><p>Finish the one on the nightstand first.</p></article>
<article class="mb-3 break-inside-avoid rounded-xl bg-rose-100 p-3 text-sm text-rose-950"><h3 class="font-bold">Gift list</h3><p>Plant for Sam, scarf for Jo.</p></article>
</div>
06. Tailwind Horizontal Snap Card Row
TailwindCardsScroll snap
A row of cards that scrolls sideways and snaps each card into place, a common pattern on phones. snap-x snap-mandatory on the row and snap-start on cards do it, and the row is a focusable, labelled region for keyboard scrolling.