Gap, Auto-Fill, Auto-Fit in Tailwind Grid

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.