iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Grid

By · Reviewed & last updated · Part of Tailwind CSS Tutorial

Tailwind’s grid utilities expose every CSS Grid property. grid grid-cols-N creates a track; col-span-N and row-span-N place items; gap-N spaces them.

Grids that solve real layouts

EXAMPLE
<!-- 1) Even 3-column grid -->
<div class="grid grid-cols-3 gap-4">
    <div>A</div><div>B</div><div>C</div>
</div>

<!-- 2) Responsive: 1 → 2 → 4 columns -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    <Card />
    <Card />
    <Card />
    <Card />
</div>

<!-- 3) Span items across columns -->
<div class="grid grid-cols-6 gap-4">
    <div class="col-span-4">Main</div>
    <div class="col-span-2">Sidebar</div>
</div>

<!-- 4) Auto-fit cards — fills available space, no media queries -->
<div class="grid gap-4" style="grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));">
    <Card /><Card /><Card /><Card /><Card />
</div>

<!-- 5) Holy grail — header / nav / main / aside / footer -->
<div class="grid min-h-screen grid-rows-[auto_1fr_auto] grid-cols-[200px_1fr_240px]">
    <header class="col-span-3 bg-slate-900 text-white p-4">Header</header>
    <aside  class="bg-slate-100 p-4">Nav</aside>
    <main   class="p-6">Content</main>
    <aside  class="bg-slate-100 p-4">Sidebar</aside>
    <footer class="col-span-3 bg-slate-900 text-white p-4">Footer</footer>
</div>

<!-- 6) Named grid lines (Tailwind 3.4+ arbitrary tracks) -->
<div class="grid grid-cols-[1fr_2fr_1fr] gap-4">
    <aside>Left</aside>
    <main>Wider main</main>
    <aside>Right</aside>
</div>

<!-- 7) Image gallery — masonry-ish using grid-auto-rows + row-span -->
<div class="grid grid-cols-3 gap-3 [grid-auto-rows:8rem]">
    <img class="row-span-2 object-cover w-full h-full" src="…" />
    <img class="object-cover w-full h-full" src="…" />
    <img class="row-span-3 object-cover w-full h-full" src="…" />
</div>

<!-- 8) Place item explicitly — col-start / col-end -->
<div class="grid grid-cols-12 gap-4">
    <div class="col-start-2 col-end-12">Centred wide block</div>
</div>

<!-- 9) Align items in their cells -->
<div class="grid grid-cols-3 items-center justify-items-center gap-4">
    …
</div>

<!-- 10) Dense packing — fills holes left by spanned items -->
<div class="grid grid-cols-4 grid-flow-row-dense gap-3">…</div>

Why it matters

CSS Grid is the right tool for 2-D layouts (rows AND columns); Flexbox for 1-D. grid-cols-[auto-fit_minmax(N,1fr)] via arbitrary value gives responsive cards without media queries.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
<div class="grid grid-cols-3 gap-4">…</div>
Try it Yourself »

Exercise

Create a 3-column grid.

class="grid -cols-3 gap-4"

Discussion

Loading…