Dialtone

Gap

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

Classes

ClassOutput
.d-gg0grid-gap: 0
.d-gg1grid-gap: .1rem
.d-gg2grid-gap: .2rem
.d-gg4grid-gap: .4rem
.d-gg6grid-gap: .6rem
.d-gg8grid-gap: .8rem
.d-gg12grid-gap: 1.2rem
.d-gg16grid-gap: 1.6rem
.d-gg24grid-gap: 2.4rem
.d-gg32grid-gap: 3.2rem
.d-gg48grid-gap: 4.8rem
.d-gg64grid-gap: 6.4rem
.d-gg72grid-gap: 7.2rem
.d-gg84grid-gap: 8.4rem
.d-gg96grid-gap: 9.6rem
.d-gg102grid-gap: 10.2rem
.d-gg114grid-gap: 11.4rem
.d-gg128grid-gap: 12.8rem
.d-gcg0grid-column-gap: 0
.d-gcg1grid-column-gap: .1rem
.d-gcg2grid-column-gap: .2rem
.d-gcg4grid-column-gap: .4rem
.d-gcg6grid-column-gap: .6rem
.d-gcg8grid-column-gap: .8rem
.d-gcg12grid-column-gap: 1.2rem
.d-gcg16grid-column-gap: 1.6rem
.d-gcg24grid-column-gap: 2.4rem
.d-gcg32grid-column-gap: 3.2rem
.d-gcg48grid-column-gap: 4.8rem
.d-gcg64grid-column-gap: 6.4rem
.d-gcg72grid-column-gap: 7.2rem
.d-gcg84grid-column-gap: 8.4rem
.d-gcg96grid-column-gap: 9.6rem
.d-gcg102grid-column-gap: 10.2rem
.d-gcg114grid-column-gap: 11.4rem
.d-gcg128grid-column-gap: 12.8rem
.d-grg0grid-row-gap: 0
.d-grg1grid-row-gap: .1rem
.d-grg2grid-row-gap: .2rem
.d-grg4grid-row-gap: .4rem
.d-grg6grid-row-gap: .6rem
.d-grg8grid-row-gap: .8rem
.d-grg12grid-row-gap: 1.2rem
.d-grg16grid-row-gap: 1.6rem
.d-grg24grid-row-gap: 2.4rem
.d-grg32grid-row-gap: 3.2rem
.d-grg48grid-row-gap: 4.8rem
.d-grg64grid-row-gap: 6.4rem
.d-grg72grid-row-gap: 7.2rem
.d-grg84grid-row-gap: 8.4rem
.d-grg96grid-row-gap: 9.6rem
.d-grg102grid-row-gap: 10.2rem
.d-grg114grid-row-gap: 11.4rem
.d-grg128grid-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.

<div class="d-d-grid d-gg16 d-g-cols2">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Independently changing row and column gaps

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

<div class="d-d-grid d-gcg24 d-grg8 d-g-cols3">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>
Last Updated: