Grid

Lay out two-dimensional designs with grid-template-columns, spanning, gaps, and auto-flow — then build a responsive card grid.

Ad 728×90

grid-template-columns & grid-template-rows

Why: grid-cols-* splits a container into N equal columns; grid-rows-* does the same for rows. Combined with gap-*, this is the fastest way to build evenly spaced layouts.

<div class="space-y-4 p-4">
  <div class="grid grid-cols-3 gap-2">
    <div class="h-12 rounded bg-indigo-500"></div>
    <div class="h-12 rounded bg-indigo-500"></div>
    <div class="h-12 rounded bg-indigo-500"></div>
    <div class="h-12 rounded bg-indigo-500"></div>
    <div class="h-12 rounded bg-indigo-500"></div>
    <div class="h-12 rounded bg-indigo-500"></div>
  </div>
  <div class="grid grid-cols-2 grid-rows-2 gap-2">
    <div class="h-10 rounded bg-emerald-500"></div>
    <div class="h-10 rounded bg-emerald-500"></div>
    <div class="h-10 rounded bg-emerald-500"></div>
    <div class="h-10 rounded bg-emerald-500"></div>
  </div>
</div>

Spanning Columns & Rows

Why: col-span-* makes an item stretch across multiple columns, and row-span-* does the same for rows — useful for hero tiles or featured items inside a grid.

<div class="grid grid-cols-3 gap-2 p-4">
  <div class="col-span-3 flex h-12 items-center justify-center rounded bg-indigo-500 text-xs text-white">col-span-3</div>
  <div class="col-span-2 flex h-12 items-center justify-center rounded bg-emerald-500 text-xs text-white">col-span-2</div>
  <div class="h-12 rounded bg-emerald-300"></div>
  <div class="row-span-2 flex h-full items-center justify-center rounded bg-pink-500 text-xs text-white">row-span-2</div>
  <div class="h-12 rounded bg-pink-200"></div>
  <div class="h-12 rounded bg-pink-200"></div>
</div>

Gap & Auto-Flow

Why: gap-x-* / gap-y-* set horizontal and vertical gaps independently. grid-flow-col switches the auto-placement direction from rows to columns — handy for horizontally scrolling galleries.

<div class="space-y-4 p-4">
  <div class="grid grid-cols-3 gap-x-6 gap-y-2">
    <div class="h-10 rounded bg-sky-500"></div>
    <div class="h-10 rounded bg-sky-500"></div>
    <div class="h-10 rounded bg-sky-500"></div>
    <div class="h-10 rounded bg-sky-500"></div>
    <div class="h-10 rounded bg-sky-500"></div>
    <div class="h-10 rounded bg-sky-500"></div>
  </div>
  <div class="grid grid-flow-col grid-rows-2 gap-2 overflow-x-auto">
    <div class="h-10 w-16 shrink-0 rounded bg-amber-500"></div>
    <div class="h-10 w-16 shrink-0 rounded bg-amber-500"></div>
    <div class="h-10 w-16 shrink-0 rounded bg-amber-500"></div>
    <div class="h-10 w-16 shrink-0 rounded bg-amber-500"></div>
  </div>
</div>

Building a Card Grid

By doing: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 is the most common responsive pattern — one column on mobile, three on desktop. The preview below shows the base (mobile) layout.

<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-lg border border-slate-200 p-4">
    <h3 class="font-semibold text-slate-900">Starter</h3>
    <p class="mt-1 text-sm text-slate-500">For solo developers.</p>
    <p class="mt-4 text-2xl font-bold">$9<span class="text-sm font-normal">/mo</span></p>
  </div>
  <div class="rounded-lg border border-slate-200 p-4">
    <h3 class="font-semibold text-slate-900">Team</h3>
    <p class="mt-1 text-sm text-slate-500">For small teams.</p>
    <p class="mt-4 text-2xl font-bold">$29<span class="text-sm font-normal">/mo</span></p>
  </div>
  <div class="rounded-lg border border-slate-200 p-4">
    <h3 class="font-semibold text-slate-900">Enterprise</h3>
    <p class="mt-1 text-sm text-slate-500">For large organizations.</p>
    <p class="mt-4 text-2xl font-bold">$99<span class="text-sm font-normal">/mo</span></p>
  </div>
</div>