View on GitHub

Gutters

Gutters are the padding between your columns, used to responsively space and align content in the OUDS Web grid system.

On this page

How they work

  • Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content. The default gutter width is described in our grid options.

  • Gutter utilities start at 2px and go up to 64px wide. This allows us to match our grid to the padding and margin spacers scale.

  • Gutters can be responsively adjusted. Use breakpoint-specific gutter classes, from xs to 3xl, to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters

.gx-* classes can be used to control the horizontal gutter widths. The container element may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we’ve increased the padding with .px-tallest.

Custom column padding
Custom column padding
<div class="container-fluid px-tallest text-center">
  <div class="row gx-jumbo">
    <div class="col">
     <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-tall">Custom column padding</div>
    </div>
  </div>
</div>
html

An alternative solution is to add a wrapper around the .row with the .overflow-hidden class:

Custom column padding
Custom column padding
<div class="container-fluid overflow-hidden text-center">
  <div class="row gx-jumbo">
    <div class="col">
     <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-tall">Custom column padding</div>
    </div>
  </div>
</div>
html

Vertical gutters

.gy-* classes can be used to control the vertical gutter widths within a row when columns wrap to new lines. Like the horizontal gutters, the vertical gutters can cause some overflow below the .row at the end of a page. If this occurs, you add a wrapper around .row with the .overflow-hidden class:

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container-fluid overflow-hidden text-center">
  <div class="row gy-jumbo">
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
  </div>
</div>
html

Horizontal & vertical gutters

Use .g-* classes (* being among none, smash, shortest, shorter, short, medium, tall, taller, tallest, spacious, huge, and jumbo) to control the horizontal and vertical grid gutters. In the example below, we use a smaller gutter width, so there isn’t a need for the .overflow-hidden wrapper class.

Custom column padding
Custom column padding
Custom column padding
Custom column padding
<div class="container-fluid text-center">
  <div class="row g-short">
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-tall">Custom column padding</div>
    </div>
  </div>
</div>
html

Row columns gutters

Gutter classes can also be added to row columns. In the following example, we use responsive row columns and responsive gutter classes.

Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
<div class="container-fluid text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-short g-lg-tallest">
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
    <div class="col">
      <div class="p-tall">Row column</div>
    </div>
  </div>
</div>
html

No gutters

The gutters between columns in our predefined grid classes can be removed with .g-none. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container-fluid and add .mx-none to the .row to prevent overflow.

In practice, here’s how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-sm-6 .col-md-8
.col-6 .col-md-4
<div class="row g-none text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
html

Nesting

Nested .rows will reset their own gutters to follow the main grid gutters. Here is an example with a .gx-none on the upper .row.

.col-12 .col-md-8

.col-3
.col-3
.col-3
.col-3
.col-6 .col-md-4
<div class="row gx-none text-center">
  <div class="col-12 col-md-8">
    <div>
      <p>.col-12 .col-md-8</p>
      <div class="row">
        <div class="col-3"><div>.col-3</div></div>
        <div class="col-3"><div>.col-3</div></div>
        <div class="col-3"><div>.col-3</div></div>
        <div class="col-3"><div>.col-3</div></div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-4">
    <div>.col-6 .col-md-4</div>
  </div>
</div>
html

Change the gutters

Classes are built from the $gutters Sass map which is inherited from the $ouds-dimension-space-fixed Sass map.

scss/_maps.scss 
$gutters: $ouds-dimension-space-fixed; // instead of `$spacers`
scss/_maps.scss 
$ouds-dimension-space-fixed: (
  "none": $ouds-space-fixed-none,
  "smash": $ouds-space-fixed-smash,
  "shortest": $ouds-space-fixed-shortest,
  "shorter": $ouds-space-fixed-shorter,
  "short": $ouds-space-fixed-short,
  "medium": $ouds-space-fixed-medium,
  "tall": $ouds-space-fixed-tall,
  "taller": $ouds-space-fixed-taller,
  "tallest": $ouds-space-fixed-tallest,
  "spacious": $ouds-space-fixed-spacious,
  "huge": $ouds-space-fixed-huge,
  "jumbo": $ouds-space-fixed-jumbo
);
scss/tokens/_semantic.scss 
$ouds-space-fixed-huge: $ouds-dimension-700;
$ouds-space-fixed-jumbo: $ouds-dimension-800;
$ouds-space-fixed-medium: $ouds-dimension-200;
$ouds-space-fixed-none: $ouds-dimension-0;
$ouds-space-fixed-short: $ouds-dimension-150;
$ouds-space-fixed-shorter: $ouds-dimension-100;
$ouds-space-fixed-shortest: $ouds-dimension-50;
$ouds-space-fixed-smash: $ouds-dimension-25;
$ouds-space-fixed-spacious: $ouds-dimension-600;
$ouds-space-fixed-tall: $ouds-dimension-300;
$ouds-space-fixed-taller: $ouds-dimension-400;
$ouds-space-fixed-tallest: $ouds-dimension-500;
$ouds-space-scaled-medium-desktop: $ouds-dimension-400;
$ouds-space-scaled-medium-mobile: $ouds-dimension-200;
$ouds-space-scaled-medium-tablet: $ouds-dimension-300;
$ouds-space-scaled-none-desktop: $ouds-dimension-0;
$ouds-space-scaled-none-mobile: $ouds-dimension-0;
$ouds-space-scaled-none-tablet: $ouds-dimension-0;
$ouds-space-scaled-short-desktop: $ouds-dimension-300;
$ouds-space-scaled-short-mobile: $ouds-dimension-150;
$ouds-space-scaled-short-tablet: $ouds-dimension-200;
$ouds-space-scaled-shorter-desktop: $ouds-dimension-200;
$ouds-space-scaled-shorter-mobile: $ouds-dimension-100;
$ouds-space-scaled-shorter-tablet: $ouds-dimension-150;
$ouds-space-scaled-shortest-desktop: $ouds-dimension-100;
$ouds-space-scaled-shortest-mobile: $ouds-dimension-50;
$ouds-space-scaled-shortest-tablet: $ouds-dimension-100;
$ouds-space-scaled-smash-desktop: $ouds-dimension-50;
$ouds-space-scaled-smash-mobile: $ouds-dimension-25;
$ouds-space-scaled-smash-tablet: $ouds-dimension-50;
$ouds-space-scaled-spacious-desktop: $ouds-dimension-800;
$ouds-space-scaled-spacious-mobile: $ouds-dimension-600;
$ouds-space-scaled-spacious-tablet: $ouds-dimension-700;
$ouds-space-scaled-tall-desktop: $ouds-dimension-500;
$ouds-space-scaled-tall-mobile: $ouds-dimension-300;
$ouds-space-scaled-tall-tablet: $ouds-dimension-400;
$ouds-space-scaled-taller-desktop: $ouds-dimension-600;
$ouds-space-scaled-taller-mobile: $ouds-dimension-400;
$ouds-space-scaled-taller-tablet: $ouds-dimension-500;
$ouds-space-scaled-tallest-desktop: $ouds-dimension-700;
$ouds-space-scaled-tallest-mobile: $ouds-dimension-500;
$ouds-space-scaled-tallest-tablet: $ouds-dimension-600;
$ouds-space-column-gap-medium: $ouds-dimension-6xs;
$ouds-space-column-gap-none: $ouds-dimension-none;
$ouds-space-column-gap-short: $ouds-dimension-7xs;
$ouds-space-column-gap-shorter: $ouds-dimension-8xs;
$ouds-space-column-gap-shortest: $ouds-dimension-9xs;
$ouds-space-column-gap-smash: $ouds-dimension-10xs;
$ouds-space-column-gap-tall: $ouds-dimension-5xs;
$ouds-space-column-gap-taller: $ouds-dimension-4xs;
$ouds-space-column-gap-tallest: $ouds-dimension-3xs;
$ouds-space-inset-medium: $ouds-dimension-6xs;
$ouds-space-inset-none: $ouds-dimension-none;
$ouds-space-inset-short: $ouds-dimension-7xs;
$ouds-space-inset-shorter: $ouds-dimension-8xs;
$ouds-space-inset-shortest: $ouds-dimension-9xs;
$ouds-space-inset-smash: $ouds-dimension-10xs;
$ouds-space-inset-spacious: $ouds-dimension-md;
$ouds-space-inset-tall: $ouds-dimension-5xs;
$ouds-space-inset-taller: $ouds-dimension-3xs;
$ouds-space-inset-tallest: $ouds-dimension-xs;
$ouds-space-padding-block-huge: $ouds-dimension-xs;
$ouds-space-padding-block-medium: $ouds-dimension-6xs;
$ouds-space-padding-block-none: $ouds-dimension-none;
$ouds-space-padding-block-short: $ouds-dimension-7xs;
$ouds-space-padding-block-shorter: $ouds-dimension-8xs;
$ouds-space-padding-block-shortest: $ouds-dimension-9xs;
$ouds-space-padding-block-smash: $ouds-dimension-10xs;
$ouds-space-padding-block-spacious: $ouds-dimension-2xs;
$ouds-space-padding-block-tall: $ouds-dimension-5xs;
$ouds-space-padding-block-taller: $ouds-dimension-4xs;
$ouds-space-padding-block-tallest: $ouds-dimension-3xs;
$ouds-space-padding-inline-huge: $ouds-dimension-xs;
$ouds-space-padding-inline-medium: $ouds-dimension-6xs;
$ouds-space-padding-inline-none: $ouds-dimension-none;
$ouds-space-padding-inline-short: $ouds-dimension-7xs;
$ouds-space-padding-inline-shorter: $ouds-dimension-8xs;
$ouds-space-padding-inline-shortest: $ouds-dimension-9xs;
$ouds-space-padding-inline-smash: $ouds-dimension-10xs;
$ouds-space-padding-inline-spacious: $ouds-dimension-2xs;
$ouds-space-padding-inline-tall: $ouds-dimension-5xs;
$ouds-space-padding-inline-taller: $ouds-dimension-4xs;
$ouds-space-padding-inline-tallest: $ouds-dimension-3xs;
$ouds-space-row-gap-medium: $ouds-dimension-6xs;
$ouds-space-row-gap-none: $ouds-dimension-none;
$ouds-space-row-gap-short: $ouds-dimension-7xs;
$ouds-space-row-gap-shorter: $ouds-dimension-8xs;
$ouds-space-row-gap-shortest: $ouds-dimension-9xs;
$ouds-space-row-gap-smash: $ouds-dimension-10xs;
$ouds-space-row-gap-tall: $ouds-dimension-5xs;
scss/tokens/_raw.scss 
$ouds-dimension-base: 4px;
$ouds-dimension-0: $ouds-dimension-base * 0; // 0
$ouds-dimension-25: $ouds-dimension-base * .5; // 2
$ouds-dimension-50: $ouds-dimension-base * 1; // 4
$ouds-dimension-75: $ouds-dimension-base * 1.5; // 6
$ouds-dimension-100: $ouds-dimension-base * 2; // 8
// $ouds-dimension-125: $ouds-dimension-base * 2.5; // 10
$ouds-dimension-150: $ouds-dimension-base * 3; // 12
$ouds-dimension-200: $ouds-dimension-base * 4; // 16
$ouds-dimension-250: $ouds-dimension-base * 5; // 20
$ouds-dimension-300: $ouds-dimension-base * 6; // 24
$ouds-dimension-350: $ouds-dimension-base * 7; // 28
$ouds-dimension-400: $ouds-dimension-base * 8; // 32
$ouds-dimension-450: $ouds-dimension-base * 9; // 36
$ouds-dimension-500: $ouds-dimension-base * 10; // 40
$ouds-dimension-550: $ouds-dimension-base * 11; // 44
$ouds-dimension-600: $ouds-dimension-base * 12; // 48
$ouds-dimension-650: $ouds-dimension-base * 13; // 52
$ouds-dimension-700: $ouds-dimension-base * 14; // 56
$ouds-dimension-750: $ouds-dimension-base * 15; // 60
$ouds-dimension-800: $ouds-dimension-base * 16; // 64
// $ouds-dimension-850: $ouds-dimension-base * 17; // 68
$ouds-dimension-900: $ouds-dimension-base * 18; // 72
$ouds-dimension-1000: $ouds-dimension-base * 20; // 80
$ouds-dimension-1200: $ouds-dimension-base * 24; // 96
$ouds-dimension-1400: $ouds-dimension-base * 28; // 112
$ouds-dimension-1600: $ouds-dimension-base * 32; // 128
$ouds-dimension-1800: $ouds-dimension-base * 36; // 144
// $ouds-dimension-2000: $ouds-dimension-base * 40; // 160
// $ouds-dimension-3000: $ouds-dimension-base * 80; // 320
$ouds-dimension-4000: $ouds-dimension-base * 120; // 480
// $ouds-dimension-5000: $ouds-dimension-base * 140; // 560
$ouds-dimension-6000: $ouds-dimension-base * 160; // 640
$ouds-dimension-7000: $ouds-dimension-base * 180; // 720
$ouds-dimension-9000: $ouds-dimension-base * 220; // 880
$ouds-dimension-11000: $ouds-dimension-base * 260; // 1040