Gap and Spacing

Utilities for controlling the spacing and gaps between grid items.

Class Name	CSS Equivalent
gap-none	gap: var(--cds-sys-spacing-none);
row-gap-none	row-gap: var(--cds-sys-spacing-none);
col-gap-none	column-gap: var(--cds-sys-spacing-none);
gap-3xs	gap: var(--cds-sys-spacing-3xs);
row-gap-3xs	row-gap: var(--cds-sys-spacing-3xs);
col-gap-3xs	column-gap: var(--cds-sys-spacing-3xs);
gap-2xs	gap: var(--cds-sys-spacing-2xs);
row-gap-2xs	row-gap: var(--cds-sys-spacing-2xs);
col-gap-2xs	column-gap: var(--cds-sys-spacing-2xs);
gap-xs	gap: var(--cds-sys-spacing-xs);
row-gap-xs	row-gap: var(--cds-sys-spacing-xs);
col-gap-xs	column-gap: var(--cds-sys-spacing-xs);
gap-s	gap: var(--cds-sys-spacing-s);
row-gap-s	row-gap: var(--cds-sys-spacing-s);
col-gap-s	column-gap: var(--cds-sys-spacing-s);
gap-m	gap: var(--cds-sys-spacing-m);
row-gap-m	row-gap: var(--cds-sys-spacing-m);
col-gap-m	column-gap: var(--cds-sys-spacing-m);
gap-l	gap: var(--cds-sys-spacing-l);
row-gap-l	row-gap: var(--cds-sys-spacing-l);
col-gap-l	column-gap: var(--cds-sys-spacing-l);
gap-xl	gap: var(--cds-sys-spacing-xl);
row-gap-xl	row-gap: var(--cds-sys-spacing-xl);
col-gap-xl	column-gap: var(--cds-sys-spacing-xl);
gap-2xl	gap: var(--cds-sys-spacing-2xl);
row-gap-2xl	row-gap: var(--cds-sys-spacing-2xl);
col-gap-2xl	column-gap: var(--cds-sys-spacing-2xl);
gap-3xl	gap: var(--cds-sys-spacing-3xl);
row-gap-3xl	row-gap: var(--cds-sys-spacing-3xl);
col-gap-3xl	column-gap: var(--cds-sys-spacing-3xl);

Setting the gap between elements

Use gap-{size} to change the gap between both rows and columns in grid and flexbox layouts.

<div class="grid grid-cols-2 gap-s">
  <div class="[...]">01</div>
  <div class="[...]">02</div>
  <div class="[...]">03</div>
  <div class="[...]">04</div>
</div>

.gap-0

.gap-none

.gap-3xs

.gap-2xs

.gap-xs

.gap-s

.gap-m

.gap-l

.gap-xl

.gap-2xl

.gap-3xl

01

02

03

04

Changing row and column gaps independently

Use row-gap-{size} and col-gap-{size} to change the gap between rows and columns independently.

<div class="grid grid-cols-2 col-gap-s row-gap-m">
  <div class="[...]">01</div>
  <div class="[...]">02</div>
  <div class="[...]">03</div>
  <div class="[...]">04</div>
</div>

.row-gap-0

.row-gap-none

.row-gap-3xs

.row-gap-2xs

.row-gap-xs

.row-gap-s

.row-gap-m

.row-gap-l

.row-gap-xl

.row-gap-2xl

.row-gap-3xl

01

02

03

04