Campus Design System

Appearance

Gap and Spacing ​

Utilities for controlling the spacing and gaps between grid items.

Class NameCSS Equivalent
gap-nonegap: var(--cds-sys-spacing-none);
row-gap-nonerow-gap: var(--cds-sys-spacing-none);
col-gap-nonecolumn-gap: var(--cds-sys-spacing-none);
gap-3xsgap: var(--cds-sys-spacing-3xs);
row-gap-3xsrow-gap: var(--cds-sys-spacing-3xs);
col-gap-3xscolumn-gap: var(--cds-sys-spacing-3xs);
gap-2xsgap: var(--cds-sys-spacing-2xs);
row-gap-2xsrow-gap: var(--cds-sys-spacing-2xs);
col-gap-2xscolumn-gap: var(--cds-sys-spacing-2xs);
gap-xsgap: var(--cds-sys-spacing-xs);
row-gap-xsrow-gap: var(--cds-sys-spacing-xs);
col-gap-xscolumn-gap: var(--cds-sys-spacing-xs);
gap-sgap: var(--cds-sys-spacing-s);
row-gap-srow-gap: var(--cds-sys-spacing-s);
col-gap-scolumn-gap: var(--cds-sys-spacing-s);
gap-mgap: var(--cds-sys-spacing-m);
row-gap-mrow-gap: var(--cds-sys-spacing-m);
col-gap-mcolumn-gap: var(--cds-sys-spacing-m);
gap-lgap: var(--cds-sys-spacing-l);
row-gap-lrow-gap: var(--cds-sys-spacing-l);
col-gap-lcolumn-gap: var(--cds-sys-spacing-l);
gap-xlgap: var(--cds-sys-spacing-xl);
row-gap-xlrow-gap: var(--cds-sys-spacing-xl);
col-gap-xlcolumn-gap: var(--cds-sys-spacing-xl);
gap-2xlgap: var(--cds-sys-spacing-2xl);
row-gap-2xlrow-gap: var(--cds-sys-spacing-2xl);
col-gap-2xlcolumn-gap: var(--cds-sys-spacing-2xl);
gap-3xlgap: var(--cds-sys-spacing-3xl);
row-gap-3xlrow-gap: var(--cds-sys-spacing-3xl);
col-gap-3xlcolumn-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.

html
<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.

html
<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