Grid Basics
Create column layouts with grid and grid-cols.
Syntax
class="grid grid-cols-3 gap-4"The grid utility plus grid-cols-{n} builds an even column layout instantly. Add gap-* for spacing.
grid grid-cols-3 gap-4 makes three equal columns with a gap between them.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer creates a three-column blog post grid that collapses to one column on mobile using grid-cols-3 and sm:grid-cols-1.
- A pricing page lays out three plan cards side by side using grid and grid-cols-3, keeping widths perfectly equal without hardcoding percentages.
- A photo gallery is tiled in a four-column grid with uniform gaps using grid-cols-4 and gap-4.
More examples
Three-column grid
grid-cols-3 creates three equal-width columns; gap-6 adds consistent gutter space between all grid cells.
<div class="grid grid-cols-3 gap-6">
<div class="bg-white p-4 rounded shadow">Card 1</div>
<div class="bg-white p-4 rounded shadow">Card 2</div>
<div class="bg-white p-4 rounded shadow">Card 3</div>
</div>Responsive grid columns
Mobile shows one column, small screens two, large screens four — achieved with responsive prefixes on grid-cols without any media query code.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-indigo-50 p-4 rounded">Item A</div>
<div class="bg-indigo-50 p-4 rounded">Item B</div>
<div class="bg-indigo-50 p-4 rounded">Item C</div>
<div class="bg-indigo-50 p-4 rounded">Item D</div>
</div>Auto-fill grid
An arbitrary grid-cols value with auto-fill and minmax creates a self-arranging grid that adds columns as space allows.
<div class="grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-4">
<div class="bg-teal-50 p-4 rounded">Auto</div>
<div class="bg-teal-50 p-4 rounded">Fill</div>
<div class="bg-teal-50 p-4 rounded">Columns</div>
</div>
Discussion