Skip to main content

​
Overview

Control spacing between flex items with static and fluid gap utilities. Gap is the modern way to add spacing between flex items without using margin utilities.
Use gap instead of margin for spacing between flex items. It’s more semantic and doesn’t require negative margins to work correctly.

​
Static Gap Utilities

Gap Properties

.gap-14pxgap: 4px;Small gap
.gap-28pxgap: 8px;Small gap
.gap-312pxgap: 12px;Medium gap
.gap-416pxgap: 16px;Standard gap
.gap-624pxgap: 24px;Large gap
.gap-832pxgap: 32px;Extra large gap
.gap-1040pxgap: 40px;Extra large gap
.gap-1248pxgap: 48px;Section gap
.gap-1456pxgap: 56px;Large section gap
.gap-1664pxgap: 64px;Extra large section gap
.gap-1872pxgap: 72px;Very large gap
.gap-2080pxgap: 80px;Huge gap
.gap-2288pxgap: 88px;Extra huge gap
.gap-2496pxgap: 96px;Maximum gap

​
Fluid Gap Utilities

Fluid gap utilities use clamp() to scale smoothly between mobile and desktop sizes, perfect for responsive layouts.

Fluid Gap Properties

.gap-fluid-1clamp(0.25rem, calc(0.21rem + 0.09vw), 0.31rem)4px → 5px
.gap-fluid-2clamp(0.5rem, calc(0.43rem + 0.18vw), 0.63rem)8px → 10px
.gap-fluid-3clamp(0.75rem, calc(0.64rem + 0.27vw), 0.94rem)12px → 15px
.gap-fluid-4clamp(1rem, calc(0.85rem + 0.37vw), 1.25rem)16px → 20px
.gap-fluid-6clamp(1.5rem, calc(1.28rem + 0.56vw), 1.88rem)24px → 30px
.gap-fluid-8clamp(2rem, calc(1.71rem + 0.74vw), 2.5rem)32px → 40px
.gap-fluid-10clamp(2.5rem, calc(2.14rem + 0.93vw), 3.13rem)40px → 50px
.gap-fluid-12clamp(3rem, calc(2.56rem + 1.1vw), 3.75rem)48px → 60px
.gap-fluid-14clamp(3.5rem, calc(2.99rem + 1.29vw), 4.38rem)56px → 70px
.gap-fluid-16clamp(4rem, calc(3.42rem + 1.48vw), 5rem)64px → 80px
.gap-fluid-18clamp(4.5rem, calc(3.84rem + 1.67vw), 5.63rem)72px → 90px
.gap-fluid-20clamp(5rem, calc(4.27rem + 1.85vw), 6.25rem)80px → 100px
.gap-fluid-22clamp(5.5rem, calc(4.7rem + 2.04vw), 6.88rem)88px → 110px
.gap-fluid-24clamp(6rem, calc(5.13rem + 2.22vw), 7.5rem)96px → 120px

​
Examples

​
Static Gap

<!-- Card grid with static gap -->
<div class="flex flex-wrap gap-6">
  <div class="w-1-3">
    <div class="card p-6">Card 1</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 2</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 3</div>
  </div>
</div>

​
Fluid Gap

<!-- Responsive card grid with fluid gap -->
<div class="flex flex-wrap gap-fluid-6">
  <div class="w-1-3">
    <div class="card p-6">Card 1</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 2</div>
  </div>
  <div class="w-1-3">
    <div class="card p-6">Card 3</div>
  </div>
</div>

<!-- Hero section with fluid gap -->
<section class="flex flex-col items-center gap-fluid-8 py-fluid-12">
  <h1 class="text-fluid-6xl font-bold">Title</h1>
  <p class="text-fluid-lg">Supporting text</p>
  <button class="btn btn-blue">Action</button>
</section>

​
Common Patterns

<nav class="flex gap-6">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

​
Form with Gap

<form class="flex flex-col gap-4">
  <input type="text" class="p-3 border border-gray rounded" placeholder="Name">
  <input type="email" class="p-3 border border-gray rounded" placeholder="Email">
  <button class="btn btn-blue">Submit</button>
</form>

​
Best Practices

  • Use gap over margin: Gap is more semantic for spacing between flex items
  • Choose appropriate size: Use smaller gaps (4-8px) for tight layouts, larger (24-48px) for sections
  • Fluid for responsive: Use fluid gap utilities for layouts that need to scale smoothly
  • Consistent spacing: Use the same gap value throughout related components
Use fluid gap utilities for layouts that need to scale smoothly across viewport sizes. They work especially well in hero sections and marketing pages.

Direction

Control flex direction

Alignment

Align flex items

Spacing

Margin and padding utilities

Flexbox Overview

Complete flexbox system overview