Gap, Auto-Fill, Auto-Fit in Tailwind Grid
Tailwind CSS provides powerful utilities for spacing out grid items using gap and creating responsive, auto-fitting layouts using auto-fill and auto-fit.
1. Gap Utilities
Use gap, gap-x, or gap-y to define spacing between grid rows or columns:
<div class="grid grid-cols-3 gap-4">
<div class="bg-gray-200 p-4">1</div>
<div class="bg-gray-200 p-4">2</div>
<div class="bg-gray-200 p-4">3</div>
</div>
Use gap-x-4 for horizontal gaps only and gap-y-4 for vertical gaps.
2. Using Auto-Fill
Auto-fill fills the row with as many columns as will fit, and leaves empty slots if necessary. Define this using Tailwind’s grid-cols-[repeat(auto-fill,...)] syntax.
<div class="grid [grid-template-columns:repeat(auto-fill,minmax(150px,1fr))] gap-4">
<div class="bg-blue-200 p-4">A</div>
<div class="bg-blue-200 p-4">B</div>
<div class="bg-blue-200 p-4">C</div>
</div>
3. Using Auto-Fit
Auto-fit behaves like auto-fill, but collapses empty columns — resulting in tighter, more responsive layouts:
<div class="grid [grid-template-columns:repeat(auto-fit,minmax(150px,1fr))] gap-4">
<div class="bg-green-200 p-4">Item 1</div>
<div class="bg-green-200 p-4">Item 2</div>
</div>
These advanced layouts are especially helpful when building cards, galleries, or responsive grids.
Conclusion
Tailwind’s gap and grid-template utilities like auto-fill and auto-fit give you powerful tools for clean and responsive layouts — with minimal effort and maximum flexibility.