Gap
Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts.
Gap classes
| Class | Output | Definition | Responsive? |
|---|---|---|---|
.g0 | gap: 0 0 | Add no space between items | |
.g1 | gap: 1px 1px | Space out items by 1px | |
.g2 | gap: 2px 2px | Space out items by 2px | |
.g4 | gap: 4px 4px | Space out items by 4px | |
.g6 | gap: 6px 6px | Space out items by 6px | |
.g8 | gap: 8px 8px | Space out items by 8px | |
.g12 | gap: 12px 12px | Space out items by 12px | |
.g16 | gap: 16px 16px | Space out items by 16px | |
.g24 | gap: 24px 24px | Space out items by 24px | |
.g32 | gap: 32px 32px | Space out items by 32px | |
.g48 | gap: 48px 48px | Space out items by 48px | |
.g64 | gap: 64px 64px | Space out items by 64px |
Examples
<div class="d-grid g0">…</div>
<div class="d-grid g1">…</div>
<div class="d-grid g2">…</div>
<div class="d-grid g4">…</div>
<div class="d-grid g8">…</div>
<div class="d-grid g12">…</div>
<div class="d-grid g16">…</div>
<div class="d-grid g24">…</div>
<div class="d-grid g32">…</div>
<div class="d-grid g48">…</div>
<div class="d-grid g64">…</div>.g0
.g1
.g2
.g4
.g6
.g8
.g12
.g16
.g24
.g32
.g48
.g64
Column gap
Spacing can be set on just the x-axis with .gx classes. They can be used independently or in combination with other atomic gap classes.
| Class | Output | Definition | Responsive? |
|---|---|---|---|
.gx0 | row-gap: 0 | Add no space between columns | |
.gx1 | row-gap: 1px | Space out columns by 1px | |
.gx2 | row-gap: 2px | Space out columns by 2px | |
.gx4 | row-gap: 4px | Space out columns by 4px | |
.gx6 | row-gap: 6px | Space out columns by 6px | |
.gx8 | row-gap: 8px | Space out columns by 8px | |
.gx12 | row-gap: 12px | Space out columns by 12px | |
.gx16 | row-gap: 16px | Space out columns by 16px | |
.gx24 | row-gap: 24px | Space out columns by 24px | |
.gx32 | row-gap: 32px | Space out columns by 32px | |
.gx48 | row-gap: 48px | Space out columns by 48px | |
.gx64 | row-gap: 64px | Space out columns by 64px |
Column examples
<div class="d-grid gx0">…</div>
<div class="d-grid gx1">…</div>
<div class="d-grid gx2">…</div>
<div class="d-grid gx4">…</div>
<div class="d-grid gx8">…</div>
<div class="d-grid gx12">…</div>
<div class="d-grid gx16">…</div>
<div class="d-grid gx24">…</div>
<div class="d-grid gx32">…</div>
<div class="d-grid gx48">…</div>
<div class="d-grid gx64">…</div>.gx0
.gx1
.gx2
.gx4
.gx6
.gx8
.gx12
.gx16
.gx24
.gx32
.gx48
.gx64
Row gap
Spacing can be set on just the y-axis with .gy classes. They can be used independently or in combination with other atomic gap classes.
| Class | Output | Definition | Responsive? |
|---|---|---|---|
.gy0 | column-gap: 0 | Add no space between rows | |
.gy1 | column-gap: 1px | Space out rows by 1px | |
.gy2 | column-gap: 2px | Space out rows by 2px | |
.gy4 | column-gap: 4px | Space out rows by 4px | |
.gy6 | column-gap: 6px | Space out rows by 6px | |
.gy8 | column-gap: 8px | Space out rows by 8px | |
.gy12 | column-gap: 12px | Space out rows by 12px | |
.gy16 | column-gap: 16px | Space out rows by 16px | |
.gy24 | column-gap: 24px | Space out rows by 24px | |
.gy32 | column-gap: 32px | Space out rows by 32px | |
.gy48 | column-gap: 48px | Space out rows by 48px | |
.gy64 | column-gap: 64px | Space out rows by 64px |
Row examples
<div class="d-grid gy0">…</div>
<div class="d-grid gy1">…</div>
<div class="d-grid gy2">…</div>
<div class="d-grid gy4">…</div>
<div class="d-grid gy8">…</div>
<div class="d-grid gy12">…</div>
<div class="d-grid gy16">…</div>
<div class="d-grid gy24">…</div>
<div class="d-grid gy32">…</div>
<div class="d-grid gy48">…</div>
<div class="d-grid gy64">…</div>.gy0
.gy1
.gy2
.gy4
.gy6
.gy8
.gy12
.gy16
.gy24
.gy32
.gy48
.gy64