gap
Sets the spacing between child elements in flex or grid containers. Only works with df and dg, serving as a modern replacement for margin-based spacing.
Class List
| Class | CSS | Description |
|---|---|---|
gap4px | gap: 4px | Minimum gap. Closely spaced icons, inline elements |
gap8px | gap: 8px | Narrow gap. Button groups, tag lists |
gap12px | gap: 12px | Normal gap. Form fields, list items |
gap16px | gap: 16px | Standard gap. General content spacing |
gap2rem | gap: 2rem (20px) | rem start. Card lists, inside sections |
gap2-4rem | gap: 2.4rem (24px) | Generous gap. Card grids |
gap3-2rem | gap: 3.2rem (32px) | Wide gap. Section separation |
gap4rem | gap: 4rem (40px) | Large gap. Large layouts |
rg8px | row-gap: 8px | Row (vertical) gap 8px only |
rg16px | row-gap: 16px | Row (vertical) gap 16px only |
rg2rem | row-gap: 2rem (20px) | Row (vertical) gap 20px only |
cg8px | column-gap: 8px | Column (horizontal) gap 8px only |
cg16px | column-gap: 16px | Column (horizontal) gap 16px only |
cg2rem | column-gap: 2rem (20px) | Column (horizontal) gap 20px only |
Visual Comparison
Compares how various gap values affect spacing between elements in a flex container.
4px — gap4px
8px — gap8px
12px — gap12px
16px — gap16px
20px (2rem) — gap2rem
32px (3.2rem) — gap3-2rem
gap vs margin Comparison
gap only adds spacing between items, while margin adds spacing on all sides.
gap — df gap16px
16px gap only between items. No gap outside first/last items
margin — mr16px
Unnecessary 16px gap after the last item
Why gap is better
gap adds spacing only between items, eliminating the extra margin problem on first/last items. Works correctly even with wrapping.
row-gap & column-gap
Row (vertical) and column (horizontal) spacing can be specified separately. rg is row-gap, cg is column-gap.
<!-- Separate row-gap and column-gap -->
<div class="dg gtcr3-1fr rg2-4rem cg8px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<!-- row-gap only (no horizontal gap) -->
<div class="df fdc rg16px">
<div>Row 1</div>
<div>Row 2</div>
<div>Row 3</div>
</div>
<!-- column-gap only (no vertical gap) -->
<div class="df cg2rem">
<div>Col 1</div>
<div>Col 2</div>
<div>Col 3</div>
</div>rg2-4rem cg8px — row 24px, column 8px
Row gap (vertical) is wide, column gap (horizontal) is narrow
| Class | CSS | direction |
|---|---|---|
rg8px | row-gap: 8px | Row (vertical) gap |
rg16px | row-gap: 16px | Row (vertical) gap |
rg2rem | row-gap: 2rem | Row (vertical) gap — 20px |
rg2-4rem | row-gap: 2.4rem | Row (vertical) gap — 24px |
cg8px | column-gap: 8px | Column (horizontal) gap |
cg16px | column-gap: 16px | Column (horizontal) gap |
cg2rem | column-gap: 2rem | Column (horizontal) gap — 20px |
cg2-4rem | column-gap: 2.4rem | Column (horizontal) gap — 24px |
Unit Examples
Use px for under 20px and rem for 20px and above. Based on 1rem = 10px.
| Class | CSS | Actual size |
|---|---|---|
gap4px | gap: 4px | 4px |
gap8px | gap: 8px | 8px |
gap12px | gap: 12px | 12px |
gap16px | gap: 16px | 16px |
gap2rem | gap: 2rem | 20px |
gap2-4rem | gap: 2.4rem | 24px |
gap3-2rem | gap: 3.2rem | 32px |
gap4rem | gap: 4rem | 40px |
gap4-8rem | gap: 4.8rem | 48px |
Common Patterns
Commonly used gap combination patterns in practice.
| Pattern | Class | Usage |
|---|---|---|
| Card grid | dg gtcrfit-minmax28rem-1fr gap2rem | Responsive card list |
| Button group | df gap8px | Gap between buttons |
| Form fields | df fdc gap16px | Vertical form layout |
| Navigation | df aic gap2-4rem | Header menu gap |
| Tag list | df fww gap8px | Wrapping tags |
| Section gap | df fdc gap4rem | Between large content blocks |
<!-- Card grid -->
<div class="dg gtcrfit-minmax28rem-1fr gap2rem">
<div class="bg18181B p2rem br8px">Card 1</div>
<div class="bg18181B p2rem br8px">Card 2</div>
<div class="bg18181B p2rem br8px">Card 3</div>
</div>
<!-- Button group -->
<div class="df gap8px">
<button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">Save</button>
<button class="bg27272A cFFFFFF py8px px16px br8px bn cp">Cancel</button>
</div>
<!-- Form fields -->
<form class="df fdc gap16px">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<textarea placeholder="Message"></textarea>
<button class="bg6366F1 cFFFFFF py8px px16px br8px bn cp">Submit</button>
</form>
<!-- Tag list (wrapping allowed) -->
<div class="df fww gap8px">
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">HTML</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">CSS</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">JavaScript</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Vue</span>
<span class="bg27272A cFAFAFA py4px px12px br4px fs14px">Nuxt</span>
</div>Tips & Notes
gap is flex/grid only
gap only works in df(display: flex) or dg(display: grid) containers. Does not apply to block or inline elements.
Use gap instead of margin
gap is cleaner than margin for inter-item spacing. No extra margin issues on first/last items, and works correctly with wrapping.
Use multiples of 4
Use multiples of 4 for spacing values: 4px, 8px, 12px, 16px, 2rem(20px), 2-4rem(24px), etc. A consistent spacing system improves design quality.
Fine control with row-gap/column-gap
To set different row and column spacing, specify rg(row-gap) and cg(column-gap) individually. gap applies both values equally.
Shorthand decomposition: gap is internally decomposed into row-gap + column-gap. When using gap2rem cg1rem, only column-gap is precisely overridden to 1rem. 2-value usage is also decomposed: gap2rem-4rem → row-gap: 2rem; column-gap: 4rem, allowing precise overrides with directional classes.