Gap

Gap utilities set the spacing between items in grid and flex containers. Unlike the space utilities, gap works with both grid and flexbox, and it's the modern way to handle item spacing.

Basic gap usage

<!-- Grid with gap -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-blue-100 p-4">Cell 1</div>
  <div class="bg-blue-100 p-4">Cell 2</div>
  <div class="bg-blue-100 p-4">Cell 3</div>
</div>

<!-- Flex with gap -->
<div class="flex gap-6">
  <button class="px-4 py-2 bg-blue-500 text-white">One</button>
  <button class="px-4 py-2 bg-blue-500 text-white">Two</button>
  <button class="px-4 py-2 bg-blue-500 text-white">Three</button>
</div>
    

Axis-specific gaps

Control horizontal and vertical gaps independently in grid layouts.

<div class="grid grid-cols-3 gap-x-8 gap-y-4">
  <div>Wide horizontal gap, narrow vertical gap</div>
</div>
    

Gap vs space

The main difference: gap adds space between all items evenly, while space adds margin to all items except the first. For new projects, prefer gap — it works in both grid and flex, and it's more predictable.