Grid Columns and Gap
Define grid tracks with grid-cols and space them with gap.
Syntax
class="grid grid-cols-1 md:grid-cols-3 gap-4"grid-cols-{n} creates n equal columns. Combine with responsive prefixes to change the count per screen size.
For example grid-cols-1 md:grid-cols-3 is one column on phones and three on tablets and up.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer builds a uniform three-column feature grid using grid-cols-3 and gap-6, ensuring consistent column widths without percentages.
- A dashboard lays out KPI metric cards in two columns on mobile and four on desktop using responsive grid-cols utilities.
- A photo gallery uses gap-1 to create a tight mosaic tile effect between images in a six-column grid.
More examples
Fixed column count grid
grid-cols-3 creates three equal fr-unit columns; gap-6 adds a 1.5rem gutter between all cells horizontally and vertically.
<div class="grid grid-cols-3 gap-6">
<div class="bg-white rounded-lg p-6 shadow">Feature A</div>
<div class="bg-white rounded-lg p-6 shadow">Feature B</div>
<div class="bg-white rounded-lg p-6 shadow">Feature C</div>
</div>Responsive grid columns
Starting with one column on mobile and expanding to four on large screens, this pattern adapts the grid without a single media query.
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-teal-50 p-4 rounded">Metric 1</div>
<div class="bg-teal-50 p-4 rounded">Metric 2</div>
<div class="bg-teal-50 p-4 rounded">Metric 3</div>
<div class="bg-teal-50 p-4 rounded">Metric 4</div>
</div>Gap control: row vs column
gap-x-8 controls horizontal gutters between columns while gap-y-4 independently controls vertical gaps between rows.
<div class="grid grid-cols-3 gap-x-8 gap-y-4">
<div class="bg-indigo-50 p-4">A</div>
<div class="bg-indigo-50 p-4">B</div>
<div class="bg-indigo-50 p-4">C</div>
<div class="bg-indigo-50 p-4">D</div>
<div class="bg-indigo-50 p-4">E</div>
<div class="bg-indigo-50 p-4">F</div>
</div>
Discussion