Grid

Build grid layouts with column and row templates, spans, gaps, and auto-placement utilities.

4 min read Level 3/5 #tailwind#layout#grid

What you'll learn

Define columns with grid-cols utilities
Span items across columns and rows
Use gap and auto-fit-style responsive patterns

Where flexbox is one-dimensional, CSS Grid is two-dimensional — rows and columns at once. Tailwind exposes the template, spans, and gaps as utilities.

Defining a Grid

<div class="grid grid-cols-3 gap-4">
  <div>1</div><div>2</div><div>3</div>
  <div>4</div><div>5</div><div>6</div>
</div>

grid-cols-3 creates three equal columns; gap-4 spaces every track. Make it responsive the usual way — one column on mobile, three on desktop:

<div class="grid grid-cols-1 md:grid-cols-3 gap-6">...</div>

Spanning Items

Items can cover multiple tracks. A feature card that takes two of three columns and two rows:

<div class="grid grid-cols-3 grid-rows-2 gap-4">
  <div class="col-span-2 row-span-2">featured</div>
  <div>a</div>
  <div>b</div>
</div>

col-span-2 and row-span-2 make it occupy a 2x2 block while the rest auto-place around it.

Non-Uneven and Auto Grids

Equal columns are not always what you want. Arbitrary values give you explicit, mixed track sizes:

<!-- Fixed sidebar + fluid content -->
<div class="grid grid-cols-[200px_1fr] gap-6">
  <aside>nav</aside>
  <main>content</main>
</div>

<!-- Responsive card wall with no breakpoints -->
<div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4">
  <!-- cards reflow automatically as the container resizes -->
</div>

The auto-fit + minmax pattern builds a self-adjusting card grid without a single breakpoint. To center every item within its cell, add place-items-center.

Padding & Margin →