Gap in Tailwind CSS 4 – Complete Guide
When building layouts using Flexbox or Grid, spacing between elements is very important for clean UI design.
Traditionally developers used margin to create spacing between elements. But with modern CSS we can use the gap property, which makes spacing much easier.
Tailwind CSS provides powerful gap utilities to control spacing between items inside flex and grid layouts.
In this tutorial you will learn:
- What gap is
- How Tailwind gap utilities work
- How to control horizontal and vertical spacing
- How to use custom gap values
- Responsive gap utilities
For this tutorial we will use the Tailwind CSS 4 browser CDN.
https://unpkg.com/@tailwindcss/browser@4
Step 1: Setup Tailwind CSS CDN
Create a basic HTML file and include Tailwind.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<h1 class="text-3xl font-bold mb-6">
Gap Utility in Tailwind CSS
</h1>
</body>
</html>
Now you can start using gap utilities.
What is Gap?
The gap property defines the spacing between rows and columns inside a container.
Example in CSS:
gap: 16px;
In Tailwind:
gap-4
Tailwind Gap Utilities
| Class | CSS |
|---|---|
| gap-4 | gap: 1rem |
| gap-x-4 | column-gap |
| gap-y-4 | row-gap |
Example 1 – Basic Gap (Grid Layout)
gap-4 adds space between both rows and columns.
<div class="grid grid-cols-2 gap-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
</div>
Result:
All grid items have equal spacing between them.
Example 2 – Gap in Flexbox Layout
Gap utilities also work with flex layouts.
<div class="flex gap-6 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">Item 1</div>
<div class="bg-green-500 text-white p-4">Item 2</div>
<div class="bg-red-500 text-white p-4">Item 3</div>
</div>
Result:
All flex items have horizontal spacing between them.
Example 3 – Column Gap (gap-x)
gap-x controls spacing between columns only.
<div class="grid grid-cols-3 gap-x-8 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Result:
Items have horizontal spacing only.
Example 4 – Row Gap (gap-y)
gap-y controls spacing between rows only.
<div class="grid grid-cols-2 gap-y-6 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
</div>
Result:
Vertical spacing increases between rows.
Example 5 – Different Row and Column Gaps
You can combine both.
<div class="grid grid-cols-3 gap-x-8 gap-y-4 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
<div class="bg-yellow-500 text-white p-4">05</div>
<div class="bg-pink-500 text-white p-4">06</div>
</div>
Result:
- Horizontal spacing → large
- Vertical spacing → smaller
Example 6 – Custom Gap Value
Tailwind allows custom values.
<div class="flex gap-[50px] bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
Here the gap is 50px.
Example 7 – Gap Using CSS Variable
You can also use CSS variables.
<div style="--my-gap:40px"
class="flex gap-(--my-gap) bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
</div>
This is shorthand for:
gap: var(--my-gap)
Responsive Gap Example
Tailwind makes spacing responsive.
<div class="grid grid-cols-2 gap-4 md:gap-8 bg-gray-100 p-4">
<div class="bg-blue-500 text-white p-4">01</div>
<div class="bg-green-500 text-white p-4">02</div>
<div class="bg-red-500 text-white p-4">03</div>
<div class="bg-purple-500 text-white p-4">04</div>
</div>
Behavior:
| Screen Size | Gap |
|---|---|
| Mobile | Small spacing |
| Desktop | Larger spacing |
Practical Example – Card Grid Layout
<div class="grid grid-cols-3 gap-6 bg-gray-100 p-6">
<div class="bg-white shadow-lg p-6 rounded-lg">
<h3 class="font-semibold text-lg">Card 1</h3>
<p class="text-gray-600 mt-2">Example card layout</p>
</div>
<div class="bg-white shadow-lg p-6 rounded-lg">
<h3 class="font-semibold text-lg">Card 2</h3>
<p class="text-gray-600 mt-2">Example card layout</p>
</div>
<div class="bg-white shadow-lg p-6 rounded-lg">
<h3 class="font-semibold text-lg">Card 3</h3>
<p class="text-gray-600 mt-2">Example card layout</p>
</div>
</div>
This creates a clean responsive card layout with consistent spacing.
Why Use Gap Instead of Margin?
Cleaner Layout
You don't need margin on every element.
Consistent Spacing
All items maintain equal spacing automatically.
Works with Flex and Grid
Gap utilities support both layout systems.
Better Responsive Control
You can change spacing at different breakpoints.
FAQs
1. What is the gap utility in Tailwind?
The gap utility controls spacing between elements inside flex or grid containers.
2. What is the difference between gap-x and gap-y?
| Utility | Purpose |
|---|---|
| gap-x | Horizontal spacing |
| gap-y | Vertical spacing |
3. Can gap be used with Flexbox?
Yes. Tailwind gap utilities work with both Flexbox and Grid layouts.
4. Can I use custom gap values?
Yes. Tailwind allows custom values.
Example:
gap-[50px]
5. Can gap be responsive?
Yes. You can apply breakpoints.
Example:
gap-4 md:gap-8
Your Feedback
Help us improve by sharing your thoughts
Online Learner helps developers master programming, database concepts, interview preparation, and real-world implementation through structured learning paths.
Quick Links
© 2023 - 2026 OnlineLearner.in | All Rights Reserved.