Gap Utilities in TailwindCSS
? Gap Utilities in Tailwind CSS
Gap utilities control the spacing between rows and columns inside flexbox and grid containers. They replace the need for margin hacks and make spacing consistent and easy.
What is Gap?
Adds space between child elements.
Works with flex and grid containers.
Supports controlling row gap (
gap-y), column gap (gap-x), or both (gap).
Tailwind Gap Classes
| Class | CSS Equivalent | Description |
|---|---|---|
gap-0 | gap: 0; | No gap |
gap-1 | gap: 0.25rem; | 4px gap |
gap-2 | gap: 0.5rem; | 8px gap |
gap-3 | gap: 0.75rem; | 12px gap |
gap-4 | gap: 1rem; | 16px gap |
gap-5 | gap: 1.25rem; | 20px gap |
gap-6 | gap: 1.5rem; | 24px gap |
gap-8 | gap: 2rem; | 32px gap |
gap-10 | gap: 2.5rem; | 40px gap |
Controlling Row and Column Gaps Separately
| Class | CSS Equivalent | Description |
|---|---|---|
gap-x-4 | column-gap: 1rem; | Horizontal gap between items |
gap-y-2 | row-gap: 0.5rem; | Vertical gap between items |
Example: Flexbox Gap
<div class="flex gap-4 p-4 bg-gray-100"> <div class="bg-blue-400 p-4">Item 1</div> <div class="bg-blue-600 p-4">Item 2</div> <div class="bg-blue-800 p-4">Item 3</div></div>Example: Grid Gap
<div class="grid grid-cols-3 gap-6 p-4"> <div class="bg-green-400 p-4">Grid 1</div> <div class="bg-green-600 p-4">Grid 2</div> <div class="bg-green-800 p-4">Grid 3</div></div>Responsive Gap Example
<div class="flex flex-wrap gap-2 md:gap-6"> <div class="w-24 h-24 bg-red-400"></div> <div class="w-24 h-24 bg-red-600"></div> <div class="w-24 h-24 bg-red-800"></div></div>Let me know if you want examples combining gaps with other flex or grid utilities!
