Gap

Controls the spacing between rows and columns in grid and flexbox layouts. This utility provides a clean, consistent way to create gutters between elements without using margins that might cause layout issues. In Tailwind v4, gap utilities work with all layout modes and have improved compatibility with other spacing utilities.

Flexbox & Grid1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4 rounded">Item 1</div>
  <div class="bg-blue-100 p-4 rounded">Item 2</div>
  <div class="bg-blue-100 p-4 rounded">Item 3</div>
  <div class="bg-blue-100 p-4 rounded">Item 4</div>
  <div class="bg-blue-100 p-4 rounded">Item 5</div>
  <div class="bg-blue-100 p-4 rounded">Item 6</div>
</div>

Examples

Grid with uniform gap between all items (1rem)

<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4 rounded">Item 1</div>
  <div class="bg-blue-100 p-4 rounded">Item 2</div>
  <div class="bg-blue-100 p-4 rounded">Item 3</div>
  <div class="bg-blue-100 p-4 rounded">Item 4</div>
  <div class="bg-blue-100 p-4 rounded">Item 5</div>
  <div class="bg-blue-100 p-4 rounded">Item 6</div>
</div>

Edit in playground

Grid with different horizontal (2rem) and vertical (1rem) gaps

<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div class="bg-green-100 p-4 rounded">Item 1</div>
  <div class="bg-green-100 p-4 rounded">Item 2</div>
  <div class="bg-green-100 p-4 rounded">Item 3</div>
  <div class="bg-green-100 p-4 rounded">Item 4</div>
  <div class="bg-green-100 p-4 rounded">Item 5</div>
  <div class="bg-green-100 p-4 rounded">Item 6</div>
</div>

Edit in playground

Flexbox layout with gap between items

<!-- Flex layout with gap -->
<div class="flex flex-wrap gap-4">
  <div class="bg-blue-100 p-4 rounded-lg">Flex item 1</div>
  <div class="bg-blue-200 p-4 rounded-lg">Flex item 2</div>
  <div class="bg-blue-300 p-4 rounded-lg">Flex item 3</div>
  <div class="bg-blue-400 p-4 rounded-lg">Flex item 4</div>
  <div class="bg-blue-500 p-4 rounded-lg text-white">Flex item 5</div>
</div>

Edit in playground

Responsive grid with gap that increases on larger screens

<!-- Responsive gap that changes with screen size -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2 sm:gap-4 md:gap-6 lg:gap-8">
  <div class="bg-purple-100 p-4 rounded-lg">Item 1</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 2</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 3</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 4</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 5</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 6</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 7</div>
  <div class="bg-purple-100 p-4 rounded-lg">Item 8</div>
</div>

Edit in playground

Live Preview

Try the Gap utility with different values

Open Interactive Playground

Variants

gap-{size}: applies to both row and column gaps; gap-x-{size}: applies only to column gaps; gap-y-{size}: applies only to row gaps; all using Tailwind's spacing scale where 1 unit = 0.25rem (4px)