Gap
Utilities to control the spacing between columns, rows, or both in grids.
Adding Universal Row and Column Gaps
Use d-g{#} to universally change the row and column gap space in grid layouts.
<div class="d-d-grid d-g16 d-g-cols2">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Independently Changing Row and Column Gaps
Use d-cg{#} or d-rg{#} to independently change the row and column gap space in grid layouts.
<div class="d-d-grid d-cg24 d-rg8 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>