Gutters

Gutter utility classes let you control the spacing between items in grid and flex layouts.

How It Works

Gutter utilities use CSS gap, column-gap, and row-gap properties. Values are mapped to your design system spacing tokens via CSS variables, e.g. var(--ro-size-4).

.ro-u-gap-4 {
  gap: var(--ro-size-4);
}
.ro-u-gap-x-6 {
  column-gap: var(--ro-size-6);
}
.ro-u-gap-y-2 {
  row-gap: var(--ro-size-2);
}

Responsive Layouts

Combine gutter utilities with grid or flex utilities for consistent spacing in all layouts.

---

See Grid and Flex for more layout options.

Use Cases

Grid Gutters

<div class="ro-grid ro-cols-3 ro-u-gap-4">
<div class="ro-card ro-u-bg-product-light">1</div>
<div class="ro-card ro-u-bg-danger-light">2</div>
<div class="ro-card ro-u-bg-success-light">3</div>
</div>

Preview

1

2

3

Flex Gutters

<div class="ro-u-flex ro-u-gap-3">
<div class="ro-card ro-u-bg-product-light">A</div>
<div class="ro-card ro-u-bg-danger-light">B</div>
<div class="ro-card ro-u-bg-success-light">C</div>
</div>

Preview

A

B

C

Horizontal and Vertical Gutters

<div class="ro-grid ro-cols-2 ro-u-gap-x-6 ro-u-gap-y-2">
<div class="ro-card ro-u-bg-product-light">X</div>
<div class="ro-card ro-u-bg-danger-light">Y</div>
<div class="ro-card ro-u-bg-success-light">Z</div>
<div class="ro-card ro-u-bg-warning-light">W</div>
</div>

Preview

X

Y

Z

W

Properties

Gap Classes

Class	Description
.ro-u-gap-{size}	Set gap size. Options: 0–14 and semantic sizes (xs-4xl)
.ro-u-gap-x-{size}	Set horizontal gap. Options: 0–14 and semantic sizes (xs-4xl)
.ro-u-gap-y-{size}	Set vertical gap. Options: 0–14 and semantic sizes (xs-4xl)