Gap

Atomic CSS gap classes allow you to set spacing on the direct children of elements with flexbox and grid layouts.

Class Output Definition Responsive?
.g0 gap: 0 Add no space between items
.g1 gap: 1px Space out items by 1px
.g2 gap: 2px Space out items by 2px
.g4 gap: 4px Space out items by 4px
.g6 gap: 6px Space out items by 6px
.g8 gap: 8px Space out items by 8px
.g12 gap: 12px Space out items by 12px
.g16 gap: 16px Space out items by 16px
.g24 gap: 24px Space out items by 24px
.g32 gap: 32px Space out items by 32px
.g48 gap: 48px Space out items by 48px
.g64 gap: 64px Space out items by 64px
<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

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 Definition Responsive?
.gx0 Add no space between columns
.gx1 Space out columns by 1px
.gx2 Space out columns by 2px
.gx4 Space out columns by 4px
.gx6 Space out columns by 6px
.gx8 Space out columns by 8px
.gx12 Space out columns by 12px
.gx16 Space out columns by 16px
.gx24 Space out columns by 24px
.gx32 Space out columns by 32px
.gx48 Space out columns by 48px
.gx64 Space out columns by 64px
<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

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 Definition Responsive?
.gy0 Add no space between rows
.gy1 Space out rows by 1px
.gy2 Space out rows by 2px
.gy4 Space out rows by 4px
.gy6 Space out rows by 6px
.gy8 Space out rows by 8px
.gy12 Space out rows by 12px
.gy16 Space out rows by 16px
.gy24 Space out rows by 24px
.gy32 Space out rows by 32px
.gy48 Space out rows by 48px
.gy64 Space out rows by 64px
<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
Deploys by Netlify