Grid
CSS Grid lays elements out in rows and columns at once. In Tailwind a grid of three equal columns is one pair of classes, grid grid-cols-3 — no grid-template-columns or repeat() needed.
Columns
grid turns the grid on, grid-cols- sets the number of equal columns, gap- the gaps:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-3 gap-4">
<div class="rounded bg-indigo-100 p-4">1</div>
<div class="rounded bg-indigo-100 p-4">2</div>
<div class="rounded bg-indigo-100 p-4">3</div>
<div class="rounded bg-indigo-100 p-4">4</div>
<div class="rounded bg-indigo-100 p-4">5</div>
</div>Five blocks fall into three columns: the third item ends the first row, the rest move to the second. The grid-cols-3 class becomes grid-template-columns: repeat(3, minmax(0, 1fr)).
A product catalog
A grid is the natural choice for a list of cards. Each card takes one cell:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-3 gap-4 bg-gray-100 p-4">
<div class="overflow-hidden rounded-lg bg-white shadow">
<img src="/media/photo-400x250.jpg" alt="Headphones" class="h-24 w-full object-cover">
<p class="p-3 text-sm font-semibold">Headphones — $79</p>
</div>
<div class="overflow-hidden rounded-lg bg-white shadow">
<img src="/media/photo-400x250.jpg" alt="Speaker" class="h-24 w-full object-cover">
<p class="p-3 text-sm font-semibold">Speaker — $45</p>
</div>
<div class="overflow-hidden rounded-lg bg-white shadow">
<img src="/media/photo-400x250.jpg" alt="Charger" class="h-24 w-full object-cover">
<p class="p-3 text-sm font-semibold">Charger — $19</p>
</div>
</div>All cards have the same width and the gaps are even. Three columns are cramped on a narrow screen — in the next lesson their number will change with the width.
Spanning cells
col-span- stretches an item over several columns, row-span- over several rows. This is how a featured product or a wide header is highlighted:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="grid grid-cols-4 gap-3">
<div class="col-span-2 row-span-2 rounded bg-amber-200 p-4">Deal of the day</div>
<div class="rounded bg-gray-100 p-4">A</div>
<div class="rounded bg-gray-100 p-4">B</div>
<div class="rounded bg-gray-100 p-4">C</div>
<div class="rounded bg-gray-100 p-4">D</div>
<div class="col-span-full rounded bg-indigo-100 p-4">Whole row</div>
</div>The yellow block takes a 2 by 2 square, and col-span-full stretches the last one across the full width.
Columns of different widths
For a sidebar and main content, column sizes go into square brackets, with an underscore in place of a space: grid-cols-[240px_1fr]. More on such values in the lesson on arbitrary values.
Common mistake
Giving col-span-2 to an element whose parent is not a grid:
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex gap-3">
<div class="col-span-2 bg-amber-200 p-4">Wide?</div>
<div class="bg-gray-100 p-4">B</div>
</div>The block did not get wider: col-span- only works inside a grid. In a flex container an item's width is changed with flex-1 or w-.