Tailwind CSS - Gap

Tailwind CSS: Gap

The gap utility in Tailwind CSS is a modern and efficient way to create space between and around items in a Grid or Flexbox container. It replaces the need for manually adding margins to child elements, leading to cleaner code and more consistent layouts.

Core Concepts: Flexbox and Grid Spacing

The gap utilities are a shorthand for the CSS properties gap, row-gap, and column-gap. They only work when applied to a parent container that has display: grid or display: flex (with flex-wrap: wrap for gaps between rows).

• gap-{size}: Sets a uniform gap for both rows and columns.
• gap-x-{size}: Sets the gap for columns (horizontal space) only.
• gap-y-{size}: Sets the gap for rows (vertical space) only.

Common Gap Utilities

Tailwind provides a comprehensive spacing scale. Here are some of the most commonly used gap utilities. The number corresponds to a value based on Tailwind’s default spacing unit, where 1 is 0.25rem (or 4px by default).

Class	CSS Properties
gap-0	gap: 0px;
gap-px	gap: 1px;
gap-2	gap: 0.5rem; /* 8px */
gap-4	gap: 1rem; /* 16px */
gap-x-8	column-gap: 2rem; /* 32px */
gap-y-6	row-gap: 1.5rem; /* 24px */

Pro Tip: You don’t need to memorize all of them. The pattern is consistent. For the full scale, refer to the official Tailwind CSS documentation.

Practical Examples

Example 1: Spacing a Grid of Cards

The gap utility is perfect for creating evenly spaced grid layouts, like a gallery of product cards. In this example, gap-4 adds a 1rem space between all grid items, both horizontally and vertically.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Gap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

  <h2 class="text-2xl font-bold mb-4 text-slate-800">Product Showcase</h2>

  <div class="grid grid-cols-3 gap-4">
    <!-- By applying 'gap-4' to the grid container, we get perfect spacing -->
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 01</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 02</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 03</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 04</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 05</div>
    <div class="bg-white rounded-lg shadow p-6 font-mono">Product 06</div>
  </div>

</body>
</html>

Example 2: Spacing Wrapped Flex Items

When using a flex container with flex-wrap, you can use gap-x-* and gap-y-* to control spacing independently. This is useful for creating layouts like a tag cloud.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Gap Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-100 p-8">

  <h2 class="text-2xl font-bold mb-4 text-slate-800">Category Tags</h2>

  <div class="flex flex-wrap gap-x-3 gap-y-3 p-4 bg-white rounded-lg">
    <!-- gap-x-3 for horizontal space, gap-y-3 for vertical space when items wrap -->
    <span class="bg-sky-200 text-sky-800 text-sm font-semibold px-3 py-1 rounded-full">Technology</span>
    <span class="bg-amber-200 text-amber-800 text-sm font-semibold px-3 py-1 rounded-full">Productivity</span>
    <span class="bg-emerald-200 text-emerald-800 text-sm font-semibold px-3 py-1 rounded-full">Design</span>
    <span class="bg-indigo-200 text-indigo-800 text-sm font-semibold px-3 py-1 rounded-full">Marketing</span>
    <span class="bg-rose-200 text-rose-800 text-sm font-semibold px-3 py-1 rounded-full">Business</span>
    <span class="bg-slate-200 text-slate-800 text-sm font-semibold px-3 py-1 rounded-full">Lifestyle</span>
  </div>

</body>
</html>

Modern Features & Best Practices

Responsive Gaps

A key feature of Tailwind is responsive design. You can easily change the gap size at different screen sizes by using breakpoint prefixes like sm:, md:, and lg:.

<!-- Starts with a small gap on mobile, and a larger gap on medium screens and up -->
<div class="grid grid-cols-2 **gap-2 md:gap-6**">
  <!-- ... grid items ... -->
</div>

Arbitrary Values

Thanks to Tailwind’s Just-In-Time (JIT) compiler, if the default spacing scale doesn’t have the exact value you need, you can use arbitrary values with square bracket notation.

<!-- Use a very specific gap of 13px -->
<div class="flex gap-[13px]">
  <!-- ... flex items ... -->
</div>

Customizing Your Theme

For real-world projects, you’ll likely use a build process. This allows you to customize your theme via the tailwind.config.js file. You can extend the default gap scale with your own values.

tailwind.config.js

module.exports = {
  theme: {
    extend: {
      gap: {
        '2.5': '0.625rem', // 10px
        'fluid': 'clamp(1rem, 5vw, 2rem)',
      }
    }
  }
}