Gutters

Horizontal, vertical, and combined gutter classes for the flexbox grid, with breakpoint-prefixed variants for responsive spacing.

@layer layout

Overview

Gutters are the gaps between column content. .row sets two CSS custom properties — --gutter-x and --gutter-y — that columns consume: --gutter-x drives padding-inline on each column, and --gutter-y drives margin-block-start. Gutter classes override these properties at the row level without touching the column structure.

Suffixes follow the same naming scale as padding and margin utilities (xsmall, small, medium, large, …) so gutter widths stay on-scale with the rest of the layout. The default horizontal gutter is 1.5rem ($grid-gutter-x); the vertical gutter defaults to 0 ($grid-gutter-y).

Horizontal gutters

.gx-{size} overrides --gutter-x on a .row to change horizontal column spacing.

Column content

<div class="container text-center">
  <div class="row gx-medium">
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

When the gutter is wider than the container's horizontal padding, the row's negative inline margins bleed outside the container edge.

Column content

<div class="container bg-even text-center">
  <div class="row gx-6xlarge cxd-pattern-diagonal">
    <div class="col dim-slight">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

Add a matching padding utility to the .container to contain it:

Column content

<div class="container px-xlarge bg-even text-center">
  <div class="row gx-6xlarge cxd-pattern-diagonal">
    <div class="col dim-slight">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

Alternatively, add .overflow-hidden to the .container to clip the bleed without extra padding:

Column content

<div class="container overflow-hidden bg-even text-center">
  <div class="row gx-6xlarge cxd-pattern-diagonal">
    <div class="col dim-slight">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

Vertical gutters

.gy-{size} overrides --gutter-y to add top spacing between rows of columns when they wrap. The .row applies an equal negative margin-block-start to cancel the gap before the first row, but this negative margin bleeds above the container boundary. Add .overflow-hidden to the .container to clip the bleed without extra padding:

Column content

<div class="container overflow-hidden text-center">
  <div class="row gy-medium">
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

Combined gutters

.g-{size} sets --gutter-x and --gutter-y simultaneously. At smaller values, the negative top-margin bleed is typically small enough that a container wrapper is not needed:

Column content

<div class="container overflow-hidden text-center">
  <div class="row g-xsmall">
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col-6">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

Responsive gutters

All three class families accept breakpoint prefixes — .{breakpoint}:g-{size}, .{breakpoint}:gx-{size}, .{breakpoint}:gy-{size} — so gutter width can change at specific viewport widths. Gutter classes work with row columns as well as explicit column spans. The example below uses a narrow two-column layout with small gutters, switching to five columns with larger gutters at the large breakpoint:

Column content

<div class="container overflow-hidden text-center">
  <div class="row row-cols-2 large:row-cols-5 g-xsmall large:g-medium">
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
    <div class="col">
      <div class="p-medium">Column content</div>
    </div>
  </div>
</div>

No gutters

.g-0 sets both --gutter-x and --gutter-y to 0, removing the row's negative margins and the column padding-inline. All other grid classes — column widths, responsive tiers, reordering — remain fully composable:

For an edge-to-edge layout, drop the .container wrapper and add .mx-0 to the .row to prevent inline overflow.

.small:col-6 .medium:col-8

.col-6 .medium:col-4

<div class="row g-0 text-center">
  <div class="small:col-6 medium:col-8">.small:col-6 .medium:col-8</div>
  <div class="col-6 medium:col-4">.col-6 .medium:col-4</div>
</div>

CSS

Gutter utilities can be customized through Sass variables at compile time.

Sass variables

$grid-gutter-x and $grid-gutter-y set the default gutter applied to every .row. Override these variables before importing Chassis to change the baseline gutter across all rows.

$grid-columns:            12;
$grid-gutter-x:           $space-xlarge;
$grid-gutter-y:           0;
$grid-row-columns:        6;

Sass maps

$gutters is assigned directly from $spaces, so every entry in the spacing scale generates a corresponding .g-*, .gx-*, and .gy-* class set. Extend $spaces before importing Chassis to add extra gutter steps; the spacing scale is shared with padding and margin utilities.

$spaces: (
  zero:           $space-zero,
  4xsmall:        $space-4xsmall,
  3xsmall:        $space-3xsmall,
  2xsmall:        $space-2xsmall,
  xsmall:         $space-xsmall,
  small:          $space-small,
  medium:         $space-medium,
  large:          $space-large,
  xlarge:         $space-xlarge,
  2xlarge:        $space-2xlarge,
  3xlarge:        $space-3xlarge,
  4xlarge:        $space-4xlarge,
  5xlarge:        $space-5xlarge,
  6xlarge:        $space-6xlarge,
);