column-gap
Sets only column (horizontal) gap in grid/flex containers. gap applies same value to both; cg controls column gap individually.
Class List
| Class | CSS | Description |
|---|---|---|
cg4px | column-gap: 4px | column spacing 4px |
cg8px | column-gap: 8px | column spacing 8px |
cg12px | column-gap: 12px | column spacing 12px |
cg16px | column-gap: 16px | column spacing 16px |
cg2rem | column-gap: 2rem (20px) | column spacing 20px |
cg2-4rem | column-gap: 2.4rem (24px) | column spacing 24px |
cg3-2rem | column-gap: 3.2rem (32px) | column spacing 32px |
Visual Comparison
Changes column gap while keeping row gap the same.
column-gap: 4px — cg4px
123456
column-gap: 16px — cg16px
123456
column-gap: 3.2rem (32px) — cg3-2rem
123456
Usage Examples
<!-- Wide column gap, narrow row gap -->
<div class="dg gtcr3-1fr cg2-4rem rg8px">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
<!-- Horizontal gap between flex items -->
<div class="df cg16px">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>Tips & Notes
Asymmetric gaps with cg + rg
Use cg and rg for different column/row gaps. E.g.: cg2-4rem rg8px
Also works in flex containers
cg applies as horizontal gap in df (display: flex) containers.