Lesson 3: Gap & Spacing | Gridlock Holmes

Understanding Gap in Grids

The gap property controls the space between grid items. It's one of the most important properties for creating visually balanced layouts. In Tailwind, gap utilities follow the same spacing scale as padding and margin.

Unlike margins (which add space outside elements), gap creates space between items without affecting the outer edges. This makes it perfect for grid layouts where you want consistent spacing.

Tailwind's Spacing Scale

Tailwind uses a numeric spacing scale where each number represents a multiple of 0.25rem (4px):

gap-0 = 0px (no gap)
gap-1 = 0.25rem (4px)
gap-2 = 0.5rem (8px)
gap-3 = 0.75rem (12px)
gap-4 = 1rem (16px)
gap-5 = 1.25rem (20px)
gap-6 = 1.5rem (24px)
gap-8 = 2rem (32px)
gap-10 = 2.5rem (40px)
gap-12 = 3rem (48px)

💡 Why This Scale?

The spacing scale ensures visual consistency across your entire design. Instead of arbitrary pixel values, you use a harmonious system that creates balance.

Basic Gap Usage

Here's a simple grid with different gap sizes:

<!-- Small gap (8px) -->
<div class="grid grid-cols-3 gap-2">
  <div class="bg-blue-500 p-4">Item 1</div>
  <div class="bg-blue-500 p-4">Item 2</div>
  <div class="bg-blue-500 p-4">Item 3</div>
</div>

<!-- Medium gap (16px) -->
<div class="grid grid-cols-3 gap-4">
  <div class="bg-green-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-green-500 p-4">Item 3</div>
</div>

<!-- Large gap (32px) -->
<div class="grid grid-cols-3 gap-8">
  <div class="bg-purple-500 p-4">Item 1</div>
  <div class="bg-purple-500 p-4">Item 2</div>
  <div class="bg-purple-500 p-4">Item 3</div>
</div>

Horizontal vs Vertical Gap

You can control horizontal and vertical spacing independently using gap-x and gap-y:

<!-- Different horizontal and vertical gaps -->
<div class="grid grid-cols-3 gap-x-6 gap-y-2">
  <div class="bg-blue-500 text-white p-4">Item 1</div>
  <div class="bg-blue-500 text-white p-4">Item 2</div>
  <div class="bg-blue-500 text-white p-4">Item 3</div>
  <div class="bg-blue-500 text-white p-4">Item 4</div>
  <div class="bg-blue-500 text-white p-4">Item 5</div>
  <div class="bg-blue-500 text-white p-4">Item 6</div>
</div>

gap-x-6 - 1.5rem (24px) horizontal spacing between columns
gap-y-2 - 0.5rem (8px) vertical spacing between rows

This is useful when you want tighter spacing between rows but more breathing room between columns.

Responsive Gap Spacing

Just like other Tailwind utilities, you can make gap responsive:

<div class="grid grid-cols-1 md:grid-cols-3 
            gap-2 md:gap-4 lg:gap-6">
  <div class="bg-purple-500 text-white p-4 rounded">Card 1</div>
  <div class="bg-purple-500 text-white p-4 rounded">Card 2</div>
  <div class="bg-purple-500 text-white p-4 rounded">Card 3</div>
</div>

This creates:

Mobile: 0.5rem (8px) gap
Tablet (md): 1rem (16px) gap
Desktop (lg): 1.5rem (24px) gap

Common Gap Values

Here are the most commonly used gap values and when to use them:

Tight Layouts (gap-2 or gap-3)

Use for compact interfaces like toolbars, button groups, or dense data displays.

<div class="grid grid-cols-4 gap-2">
  <button class="bg-gray-200 p-2">Edit</button>
  <button class="bg-gray-200 p-2">Delete</button>
  <button class="bg-gray-200 p-2">Share</button>
  <button class="bg-gray-200 p-2">More</button>
</div>

Standard Layouts (gap-4 or gap-6)

The most common choice for general layouts, cards, and content grids.

<div class="grid grid-cols-3 gap-4">
  <div class="bg-white shadow p-6">Product 1</div>
  <div class="bg-white shadow p-6">Product 2</div>
  <div class="bg-white shadow p-6">Product 3</div>
</div>

Spacious Layouts (gap-8 or gap-12)

Use for hero sections, feature showcases, or when you want elements to breathe.

<div class="grid grid-cols-2 gap-12">
  <div class="text-center p-12">
    <h3 class="text-2xl font-bold">Feature 1</h3>
    <p>Description goes here</p>
  </div>
  <div class="text-center p-12">
    <h3 class="text-2xl font-bold">Feature 2</h3>
    <p>Description goes here</p>
  </div>
</div>

⚠️ Gap vs Padding:

Gap: Space between items (doesn't affect outer edges)
Padding: Space inside an element (affects all sides)
Use gap for spacing between grid items, padding for space inside them.

Real-World Example: Image Gallery

Here's how you'd create a responsive image gallery with proper spacing:

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  <img src="photo1.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo2.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo3.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo4.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo5.jpg" class="w-full h-48 object-cover rounded-lg">
  <img src="photo6.jpg" class="w-full h-48 object-cover rounded-lg">
</div>

This creates a clean gallery with consistent 1rem spacing between all images, adapting from 2 columns on mobile to 4 columns on large screens.

Combining Gap with Padding

For the best results, combine gap (space between items) with padding (space inside items):

<div class="grid grid-cols-3 gap-6">
  <div class="bg-white p-6 shadow-lg rounded">
    <h3 class="font-bold">Card Title</h3>
    <p>Card content</p>
  </div>
  <div class="bg-white p-6 shadow-lg rounded">
    <h3 class="font-bold">Card Title</h3>
    <p>Card content</p>
  </div>
  <div class="bg-white p-6 shadow-lg rounded">
    <h3 class="font-bold">Card Title</h3>
    <p>Card content</p>
  </div>
</div>

gap-6 on container - 1.5rem space between cards
p-6 on cards - 1.5rem padding inside each card

✅ Pro Tip:

For visual harmony, use the same spacing value for gap and padding. If your grid has gap-6, consider using p-6 inside the items. This creates consistency.

Level 1 Complete!

Congratulations! You've completed Level 1 and learned the basics of Tailwind Grid:

✅ What Tailwind Grid is and why it's useful
✅ Creating responsive grids with breakpoints
✅ Controlling spacing with gap utilities

In Level 2, you'll learn how to create more complex layouts by spanning items across columns and rows, and build real-world patterns like dashboards and card layouts!

📏 Lesson 3: Gap & Spacing