Gap

The gap class sets the gap, column-gap or row-gap properties. It controls the spacing between items in a grid or flex container.

Overview

The value can be either one of our predefined spacing tokens (0 - 1250).

CSS Shortcut class	Applied style
`gap-<value>`	`gap: var(--gcds-spacing-<value>);`
`gap-x-<value>`	`column-gap: var(--gcds-spacing-<value>);`
`gap-y-<value>`	`row-gap: var(--gcds-spacing-<value>);`

Examples

Columns and rows have --gcds-spacing-400 of space between them.

<div class="d-grid grid-cols-2 gap-400">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

Columns have --gcds-spacing-400 of space between them.

<div class="d-grid grid-cols-2 gap-x-400">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

Rows have --gcds-spacing-400 of space between them.

<div class="d-grid grid-cols-2 gap-y-400">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

Conditional styling

Apply this style to specific screen sizes

Use a responsive layout prefix to apply this class only to a specified screen size. The available breakpoints are:

<div class="xs:gap-300 ...">
  ...
</div>

Learn more about the responsive layout prefix.

2025-10-01