Utilities to control the spacing between columns, rows, or both in grids.
Use d-g-{stop} to set gap using spacing token stops. The number references the spacing token (d-g-100 = --dt-spacing-100 = 8px). These classes work with both flex and grid layouts.
Use d-g-{stop} to universally change the row and column gap space in grid layouts.
<div class="d-d-grid d-g-200 d-g-cols2 d-w100p d-bar-400 d-bgc-bold"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">4</dt-stack> </div>
Use d-cg-{stop} or d-rg-{stop} to independently change the row and column gap space in grid layouts.
<div class="d-d-grid d-cg-300 d-rg-100 d-g-cols3 d-w100p d-bar-400 d-bgc-bold"> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">1</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">2</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">3</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">4</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">5</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">6</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">7</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">8</dt-stack> <dt-stack direction="row" align="center" justify="center" class="d-p-200 d-bgc-moderate d-bar-300">9</dt-stack> </div>
Class
|
Output
|
REM
|
PX
|
|---|---|---|---|
| .d-g-0 | gap: var(--dt-spacing-0) !important; | 0rem | 0px |
| .d-g-1 | gap: var(--dt-spacing-1) !important; | 0.1rem | 1px |
| .d-g-25 | gap: var(--dt-spacing-25) !important; | 0.2rem | 2px |
| .d-g-50 | gap: var(--dt-spacing-50) !important; | 0.4rem | 4px |
| .d-g-75 | gap: var(--dt-spacing-75) !important; | 0.6rem | 6px |
| .d-g-100 | gap: var(--dt-spacing-100) !important; | 0.8rem | 8px |
| .d-g-125 | gap: var(--dt-spacing-125) !important; | 1rem | 10px |
| .d-g-150 | gap: var(--dt-spacing-150) !important; | 1.2rem | 12px |
| .d-g-175 | gap: var(--dt-spacing-175) !important; | 1.4rem | 14px |
| .d-g-200 | gap: var(--dt-spacing-200) !important; | 1.6rem | 16px |
| .d-g-250 | gap: var(--dt-spacing-250) !important; | 2rem | 20px |
| .d-g-300 | gap: var(--dt-spacing-300) !important; | 2.4rem | 24px |
| .d-g-350 | gap: var(--dt-spacing-350) !important; | 2.8rem | 28px |
| .d-g-400 | gap: var(--dt-spacing-400) !important; | 3.2rem | 32px |
| .d-g-450 | gap: var(--dt-spacing-450) !important; | 3.6rem | 36px |
| .d-g-500 | gap: var(--dt-spacing-500) !important; | 4rem | 40px |
| .d-g-525 | gap: var(--dt-spacing-525) !important; | 4.2rem | 42px |
| .d-g-550 | gap: var(--dt-spacing-550) !important; | 4.4rem | 44px |
| .d-g-600 | gap: var(--dt-spacing-600) !important; | 4.8rem | 48px |
| .d-g-650 | gap: var(--dt-spacing-650) !important; | 5.2rem | 52px |
| .d-g-700 | gap: var(--dt-spacing-700) !important; | 5.6rem | 56px |
| .d-g-750 | gap: var(--dt-spacing-750) !important; | 6rem | 60px |
| .d-g-800 | gap: var(--dt-spacing-800) !important; | 6.4rem | 64px |
| .d-cg-0 | column-gap: var(--dt-spacing-0) !important; | 0rem | 0px |
| .d-cg-1 | column-gap: var(--dt-spacing-1) !important; | 0.1rem | 1px |
| .d-cg-25 | column-gap: var(--dt-spacing-25) !important; | 0.2rem | 2px |
| .d-cg-50 | column-gap: var(--dt-spacing-50) !important; | 0.4rem | 4px |
| .d-cg-75 | column-gap: var(--dt-spacing-75) !important; | 0.6rem | 6px |
| .d-cg-100 | column-gap: var(--dt-spacing-100) !important; | 0.8rem | 8px |
| .d-cg-125 | column-gap: var(--dt-spacing-125) !important; | 1rem | 10px |
| .d-cg-150 | column-gap: var(--dt-spacing-150) !important; | 1.2rem | 12px |
| .d-cg-175 | column-gap: var(--dt-spacing-175) !important; | 1.4rem | 14px |
| .d-cg-200 | column-gap: var(--dt-spacing-200) !important; | 1.6rem | 16px |
| .d-cg-250 | column-gap: var(--dt-spacing-250) !important; | 2rem | 20px |
| .d-cg-300 | column-gap: var(--dt-spacing-300) !important; | 2.4rem | 24px |
| .d-cg-350 | column-gap: var(--dt-spacing-350) !important; | 2.8rem | 28px |
| .d-cg-400 | column-gap: var(--dt-spacing-400) !important; | 3.2rem | 32px |
| .d-cg-450 | column-gap: var(--dt-spacing-450) !important; | 3.6rem | 36px |
| .d-cg-500 | column-gap: var(--dt-spacing-500) !important; | 4rem | 40px |
| .d-cg-525 | column-gap: var(--dt-spacing-525) !important; | 4.2rem | 42px |
| .d-cg-550 | column-gap: var(--dt-spacing-550) !important; | 4.4rem | 44px |
| .d-cg-600 | column-gap: var(--dt-spacing-600) !important; | 4.8rem | 48px |
| .d-cg-650 | column-gap: var(--dt-spacing-650) !important; | 5.2rem | 52px |
| .d-cg-700 | column-gap: var(--dt-spacing-700) !important; | 5.6rem | 56px |
| .d-cg-750 | column-gap: var(--dt-spacing-750) !important; | 6rem | 60px |
| .d-cg-800 | column-gap: var(--dt-spacing-800) !important; | 6.4rem | 64px |
| .d-rg-0 | row-gap: var(--dt-spacing-0) !important; | 0rem | 0px |
| .d-rg-1 | row-gap: var(--dt-spacing-1) !important; | 0.1rem | 1px |
| .d-rg-25 | row-gap: var(--dt-spacing-25) !important; | 0.2rem | 2px |
| .d-rg-50 | row-gap: var(--dt-spacing-50) !important; | 0.4rem | 4px |
| .d-rg-75 | row-gap: var(--dt-spacing-75) !important; | 0.6rem | 6px |
| .d-rg-100 | row-gap: var(--dt-spacing-100) !important; | 0.8rem | 8px |
| .d-rg-125 | row-gap: var(--dt-spacing-125) !important; | 1rem | 10px |
| .d-rg-150 | row-gap: var(--dt-spacing-150) !important; | 1.2rem | 12px |
| .d-rg-175 | row-gap: var(--dt-spacing-175) !important; | 1.4rem | 14px |
| .d-rg-200 | row-gap: var(--dt-spacing-200) !important; | 1.6rem | 16px |
| .d-rg-250 | row-gap: var(--dt-spacing-250) !important; | 2rem | 20px |
| .d-rg-300 | row-gap: var(--dt-spacing-300) !important; | 2.4rem | 24px |
| .d-rg-350 | row-gap: var(--dt-spacing-350) !important; | 2.8rem | 28px |
| .d-rg-400 | row-gap: var(--dt-spacing-400) !important; | 3.2rem | 32px |
| .d-rg-450 | row-gap: var(--dt-spacing-450) !important; | 3.6rem | 36px |
| .d-rg-500 | row-gap: var(--dt-spacing-500) !important; | 4rem | 40px |
| .d-rg-525 | row-gap: var(--dt-spacing-525) !important; | 4.2rem | 42px |
| .d-rg-550 | row-gap: var(--dt-spacing-550) !important; | 4.4rem | 44px |
| .d-rg-600 | row-gap: var(--dt-spacing-600) !important; | 4.8rem | 48px |
| .d-rg-650 | row-gap: var(--dt-spacing-650) !important; | 5.2rem | 52px |
| .d-rg-700 | row-gap: var(--dt-spacing-700) !important; | 5.6rem | 56px |
| .d-rg-750 | row-gap: var(--dt-spacing-750) !important; | 6rem | 60px |
| .d-rg-800 | row-gap: var(--dt-spacing-800) !important; | 6.4rem | 64px |
| .d-g-unset | gap: unset !important; | N/A | N/A |
| .d-cg-unset | column-gap: unset !important; | N/A | N/A |
| .d-rg-unset | row-gap: unset !important; | N/A | N/A |
Gap documentation last updated Friday, September 4, 2026
fix/popover-modal-zindex-scope