Grid

Usage
Offset
Condensed grid
No gutters
Hanging content
Aspect ratio
Full bleed
Full width

Usage

The default grid format closely mirrors Bootstrap's grid. At the top-level, you define a container with the .bx--grid class. Inside of a grid, you have multiple rows where you use .bx--row. Inside of a row, you use our column classes (.bx--col, .bx--col-<breakpoint>-<span>)

Auto columns

1/4

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
</div>

Column span per breakpoint

Use the column helpers to specify different column spans at different widths

Content

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col-sm-1 bx--col-md-2 bx--col-lg-4">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
    <div class="bx--col-sm-1 bx--col-md-2 bx--col-lg-6">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
    <div class="bx--col-sm-1 bx--col-md-2 bx--col-lg-4">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
    <div class="bx--col-sm-1 bx--col-md-2 bx--col-lg-2">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
  </div>
</div>

Hide column per breakpoint

Use the column helpers to specify a column span of 0 at different widths

Never Hidden

Hidden on Medium Screens

Hidden on Small Screens

Hidden on Large Screens

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col-sm-1 bx--col-md-2 bx--col-lg-6">
      <div class="outside">
        <div class="inside">Never Hidden</div>
      </div>
    </div>
    <div class="bx--col-sm-2 bx--col-md-0 bx--col-lg-6">
      <div class="outside">
        <div class="inside">Hidden on Medium Screens</div>
      </div>
    </div>
    <div class="bx--col-sm-0 bx--col-md-3 bx--col-lg-4">
      <div class="outside">
        <div class="inside">Hidden on Small Screens</div>
      </div>
    </div>
    <div class="bx--col-sm-1 bx--col-md-3 bx--col-lg-0">
      <div class="outside">
        <div class="inside">Hidden on Large Screens</div>
      </div>
    </div>
  </div>
</div>

Offset

Use offset classes to offset content by a given column span

Default offset usage

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--offset-lg-15 bx--col-lg-1">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-14 bx--col-lg-2">
      <div class="outside">
        <div class="inside">2</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-13 bx--col-lg-3">
      <div class="outside">
        <div class="inside">3</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-12 bx--col-lg-4">
      <div class="outside">
        <div class="inside">4</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-11 bx--col-lg-5">
      <div class="outside">
        <div class="inside">5</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-10 bx--col-lg-6">
      <div class="outside">
        <div class="inside">6</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-9 bx--col-lg-7">
      <div class="outside">
        <div class="inside">7</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-8 bx--col-lg-8">
      <div class="outside">
        <div class="inside">8</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-7 bx--col-lg-9">
      <div class="outside">
        <div class="inside">9</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-6 bx--col-lg-10">
      <div class="outside">
        <div class="inside">10</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-5 bx--col-lg-11">
      <div class="outside">
        <div class="inside">11</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-4 bx--col-lg-12">
      <div class="outside">
        <div class="inside">12</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-3 bx--col-lg-13">
      <div class="outside">
        <div class="inside">13</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-2 bx--col-lg-14">
      <div class="outside">
        <div class="inside">14</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-1 bx--col-lg-15">
      <div class="outside">
        <div class="inside">15</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--offset-lg-0 bx--col-lg-16">
      <div class="outside">
        <div class="inside">16</div>
      </div>
    </div>
  </div>
</div>

Condensed grid

A condensed grid collapses the gutter to 2px. Useful for fluid layouts. Rows have 2px of margin between them to match gutter.

Default usage

1/4

Code

<div class="bx--grid bx--grid--condensed">
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
</div>

Mixed row content

Use a helper class to specify a single row as condensed. Rows that are adjacent and are condensed will have 2px of margin between them to match gutter.

1/4

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="bx--row bx--row--condensed">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="bx--row bx--row--condensed">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
</div>

No gutters

Sometimes it is useful to have no gutters in a layout, particularly for fluid layouts. You can specify no gutters on a column-by-column basis or for all columns in a row.

No gutters

Single column usage of bx--no-gutter

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col bx--no-gutter">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col bx--no-gutter">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col bx--no-gutter">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col bx--no-gutter">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>

No gutters

Row usage of bx--no-gutter

Code

<div class="bx--grid">
  <div class="bx--row bx--no-gutter">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>

No gutters - directional

You can also specify no gutters for either direction, for both columns and rows

No gutter on left side

No gutter on right side

No gutter on left side

No gutter on right side

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col bx--no-gutter--left">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
  <div class="bx--row">
    <div class="bx--col bx--no-gutter--right">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
  <div class="bx--row bx--no-gutter--left">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
  </div>
  <div class="bx--row bx--no-gutter--right">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
  </div>
</div>

Hanging content

When working with no gutters, it is helpful to keep content inside of the columns aligned with other rows in the same grid. In order to do this, we use a combination of no-gutter and hang classes.

Hanging text

In order to hang text, you will need to specify no gutter on the left-hand side and use hang on the inner text that you want to align

1/4

Full width image

1/4

Full width image

1/4

Full width image

1/4

Full width image

1/4

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="bx--row bx--no-gutter--left">
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object image-example">Full width image</div>
      </div>
      <div class="outside bx--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object image-example">Full width image</div>
      </div>
      <div class="outside bx--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object image-example">Full width image</div>
      </div>
      <div class="outside bx--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object image-example">Full width image</div>
      </div>
      <div class="outside bx--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
</div>

Aspect ratio

When designing fluid layouts, sometimes it is helpful for an asset or card to be a specific aspect ratio. We offer several classes for specifying aspect ratio for given content.

16x9

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--16x9">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--16x9">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--16x9">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--16x9">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

2x1

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--2x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--2x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--2x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--2x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

4x3

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--4x3">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--4x3">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--4x3">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--4x3">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

1x1

Code

<div class="bx--grid">
  <div class="bx--row">
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bx--col">
      <div class="bx--aspect-ratio bx--aspect-ratio--1x1">
        <div class="bx--aspect-ratio--object">
          <div class="outside">
            <div class="inside">1</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Full bleed

When wanting background colors to go edge-to-edge, you can apply your desired color directly to the grid

Usage

In this example, we give the grid element the class name "bleed" which we then style with a background color.

Code

<div class="bx--grid bleed">
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>

Full width

By default, the grid has a max width set. You can remove this by using a grid modifier class.

Usage

Code

<div class="bx--grid bx--grid--full-width">
  <div class="bx--row">
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="bx--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>