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
`.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

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	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

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	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

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

Edit on GitHub