0
0
Tailwindmarkup~5 mins

Gap between grid cells in Tailwind

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Adding space between grid cells makes content easier to see and nicer to look at. It helps separate items clearly.

When you want to add space between photos in a gallery.
When you have a list of cards and want some breathing room between them.
When you create a dashboard with multiple boxes and want them separated.
When you want consistent spacing between buttons arranged in a grid.
When you want to improve readability by separating text blocks in a grid layout.
Syntax
Tailwind
gap-{size}

// Example: gap-4

Use gap-{size} to add equal space between rows and columns.

You can also use gap-x-{size} for horizontal gaps and gap-y-{size} for vertical gaps.

Examples
This adds a uniform gap of size 4 between all grid cells.
Tailwind
<div class="grid grid-cols-3 gap-4">
  <!-- grid items -->
</div>
This adds a horizontal gap of 6 and a vertical gap of 2 between grid cells.
Tailwind
<div class="grid grid-cols-2 gap-x-6 gap-y-2">
  <!-- grid items -->
</div>
This creates bigger gaps of size 8 between all cells.
Tailwind
<div class="grid grid-cols-4 gap-8">
  <!-- grid items -->
</div>
Sample Program

This example creates a 3-column grid with six blue boxes. The gap-4 class adds space between each box horizontally and vertically.

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid Gap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="p-6">
  <h1 class="text-xl font-bold mb-4">Grid with Gap Between Cells</h1>
  <div class="grid grid-cols-3 gap-4">
    <div class="bg-blue-500 text-white p-4 rounded">Cell 1</div>
    <div class="bg-blue-500 text-white p-4 rounded">Cell 2</div>
    <div class="bg-blue-500 text-white p-4 rounded">Cell 3</div>
    <div class="bg-blue-500 text-white p-4 rounded">Cell 4</div>
    <div class="bg-blue-500 text-white p-4 rounded">Cell 5</div>
    <div class="bg-blue-500 text-white p-4 rounded">Cell 6</div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

The gap size uses Tailwind's spacing scale, like 1, 2, 4, 6, 8, etc.

Gaps work well with grid and flex layouts for spacing items evenly.

Using gap is better than adding margin to individual items because it keeps spacing consistent.

Summary

Use gap-{size} to add space between grid cells easily.

You can control horizontal and vertical gaps separately with gap-x-{size} and gap-y-{size}.

Adding gaps improves the look and readability of grid layouts.