Gap

Utilities to control the spacing between columns, rows, or both in grids.

Classes

Class Output
.d-gg0 grid-gap: 0
.d-gg1 grid-gap: .1rem
.d-gg2 grid-gap: .2rem
.d-gg4 grid-gap: .4rem
.d-gg6 grid-gap: .6rem
.d-gg8 grid-gap: .8rem
.d-gg12 grid-gap: 1.2rem
.d-gg16 grid-gap: 1.6rem
.d-gg24 grid-gap: 2.4rem
.d-gg32 grid-gap: 3.2rem
.d-gg48 grid-gap: 4.8rem
.d-gg64 grid-gap: 6.4rem
.d-gg72 grid-gap: 7.2rem
.d-gg84 grid-gap: 8.4rem
.d-gg96 grid-gap: 9.6rem
.d-gg102 grid-gap: 10.2rem
.d-gg114 grid-gap: 11.4rem
.d-gg128 grid-gap: 12.8rem
.d-gcg0 grid-column-gap: 0
.d-gcg1 grid-column-gap: .1rem
.d-gcg2 grid-column-gap: .2rem
.d-gcg4 grid-column-gap: .4rem
.d-gcg6 grid-column-gap: .6rem
.d-gcg8 grid-column-gap: .8rem
.d-gcg12 grid-column-gap: 1.2rem
.d-gcg16 grid-column-gap: 1.6rem
.d-gcg24 grid-column-gap: 2.4rem
.d-gcg32 grid-column-gap: 3.2rem
.d-gcg48 grid-column-gap: 4.8rem
.d-gcg64 grid-column-gap: 6.4rem
.d-gcg72 grid-column-gap: 7.2rem
.d-gcg84 grid-column-gap: 8.4rem
.d-gcg96 grid-column-gap: 9.6rem
.d-gcg102 grid-column-gap: 10.2rem
.d-gcg114 grid-column-gap: 11.4rem
.d-gcg128 grid-column-gap: 12.8rem
.d-grg0 grid-row-gap: 0
.d-grg1 grid-row-gap: .1rem
.d-grg2 grid-row-gap: .2rem
.d-grg4 grid-row-gap: .4rem
.d-grg6 grid-row-gap: .6rem
.d-grg8 grid-row-gap: .8rem
.d-grg12 grid-row-gap: 1.2rem
.d-grg16 grid-row-gap: 1.6rem
.d-grg24 grid-row-gap: 2.4rem
.d-grg32 grid-row-gap: 3.2rem
.d-grg48 grid-row-gap: 4.8rem
.d-grg64 grid-row-gap: 6.4rem
.d-grg72 grid-row-gap: 7.2rem
.d-grg84 grid-row-gap: 8.4rem
.d-grg96 grid-row-gap: 9.6rem
.d-grg102 grid-row-gap: 10.2rem
.d-grg114 grid-row-gap: 11.4rem
.d-grg128 grid-row-gap: 12.8rem

Adding universal row and column gaps

Use d-gg{#} to universally change the row and column gap space in grid layouts.

Independently changing row and column gaps

Use d-gcg{#} or d-grg{#} to independently change the row and column gap space in grid layouts.