Grid

Usage

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

Auto columns

1/4
1/4
1/4
1/4
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--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
Content
Content
Content
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col-sm-1 cds--col-md-2 cds--col-lg-4">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
    <div class="cds--col-sm-1 cds--col-md-2 cds--col-lg-6">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
    <div class="cds--col-sm-1 cds--col-md-2 cds--col-lg-4">
      <div class="outside">
        <div class="inside">Content</div>
      </div>
    </div>
    <div class="cds--col-sm-1 cds--col-md-2 cds--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="cds--grid">
  <div class="cds--row">
    <div class="cds--col-sm-1 cds--col-md-2 cds--col-lg-6">
      <div class="outside">
        <div class="inside">Never Hidden</div>
      </div>
    </div>
    <div class="cds--col-sm-2 cds--col-md-0 cds--col-lg-6">
      <div class="outside">
        <div class="inside">Hidden on Medium Screens</div>
      </div>
    </div>
    <div class="cds--col-sm-0 cds--col-md-3 cds--col-lg-4">
      <div class="outside">
        <div class="inside">Hidden on Small Screens</div>
      </div>
    </div>
    <div class="cds--col-sm-1 cds--col-md-3 cds--col-lg-0">
      <div class="outside">
        <div class="inside">Hidden on Large Screens</div>
      </div>
    </div>
  </div>
</div>

Include column padding

Use the column padding helper to add vertical padding to a node in a column

1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col cds--col-padding">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--col-padding">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col cds--col-padding">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col cds--col-padding">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--row-padding">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
</div>

Offset

Use offset classes to offset content by a given column span

Default offset usage

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

Condensed grid

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

Default usage

1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
Code
<div class="cds--grid cds--grid--condensed">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--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
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--row--condensed">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--row--condensed">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
</div>

Narrow grid

A narrow grid allows the container to hang 16px into the gutter on one side

Default usage

1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
Code
<div class="cds--grid cds--grid--narrow">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--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 narrow.

1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
1/4
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--row--narrow">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--row--narrow">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--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 cds--no-gutter

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

No gutters

Row usage of cds--no-gutter

1
1
1
1
Code
<div class="cds--grid">
  <div class="cds--row cds--no-gutter">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--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
1
1
1
No gutter on right side
1
1
1
No gutter on left side
No gutter on left side
No gutter on left side
No gutter on left side
No gutter on right side
No gutter on right side
No gutter on right side
No gutter on right side
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col cds--no-gutter--left">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
  <div class="cds--row">
    <div class="cds--col cds--no-gutter--right">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--no-gutter--left">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on left side</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--no-gutter--right">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">No gutter on right side</div>
      </div>
    </div>
    <div class="cds--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
1/4
1/4
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="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1/4</div>
      </div>
    </div>
  </div>
  <div class="cds--row cds--no-gutter--left">
    <div class="cds--col">
      <div class="image-example cds--aspect-ratio cds--aspect-ratio--1x1">Full width image</div>
      <div class="outside cds--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="image-example cds--aspect-ratio cds--aspect-ratio--1x1">Full width image</div>
      <div class="outside cds--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="image-example cds--aspect-ratio cds--aspect-ratio--1x1">Full width image</div>
      <div class="outside cds--hang--left">
        <div class="inside">1/4</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="image-example cds--aspect-ratio cds--aspect-ratio--1x1">Full width image</div>
      <div class="outside cds--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.

2:1

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

16:9

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

4:3

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

1:1

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

3:4

1
1
1
1
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--3x4">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--3x4">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--3x4">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--3x4">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>

9:16

1
1
1
1
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--9x16">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--9x16">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--9x16">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--9x16">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>

1:2

1
1
1
1
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--1x2">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--1x2">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--1x2">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--1x2">
        <div class="inside">1</div>
      </div>
    </div>
  </div>
</div>

1:1 Aspect Ratio Overflow

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam tempus rutrum. Morbi consequat, mi quis pharetra eleifend, ipsum arcu porta arcu, malesuada egestas sapien enim ac nisi. Maecenas ipsum nibh, viverra viverra feugiat quis, convallis pulvinar nisi. Fusce eget erat in nulla vestibulum posuere id eu augue. Aliquam eget nulla volutpat, suscipit leo quis, vulputate risus. Cras orci arcu, aliquet ac eleifend placerat, interdum id augue. Morbi mollis urna sed euismod condimentum. Nulla ut mauris ex. Pellentesque id volutpat arcu. In ligula est, varius at facilisis eu, blandit ornare turpis. Nullam consequat venenatis magna sed sodales. Nam ornare nibh augue, non suscipit quam feugiat ut. Vivamus mollis libero mauris, vel venenatis justo feugiat sed. Ut consectetur nunc condimentum egestas vestibulum. Integer metus metus, elementum at magna vel, cursus commodo urna.
1
1
1
Code
<div class="cds--grid">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--2x1">
        <div class="inside">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam tempus rutrum. Morbi consequat, mi quis pharetra eleifend, ipsum arcu porta arcu, malesuada egestas sapien enim ac nisi. Maecenas ipsum nibh, viverra viverra feugiat quis, convallis pulvinar nisi. Fusce eget erat in nulla vestibulum posuere id eu augue. Aliquam eget nulla volutpat, suscipit leo quis, vulputate risus. Cras orci arcu, aliquet ac eleifend placerat, interdum id augue. Morbi mollis urna sed euismod condimentum. Nulla ut mauris ex. Pellentesque id volutpat arcu. In ligula est, varius at facilisis eu, blandit ornare turpis. Nullam consequat venenatis magna sed sodales. Nam ornare nibh augue, non suscipit quam feugiat ut. Vivamus mollis libero mauris, vel venenatis justo feugiat sed. Ut consectetur nunc condimentum egestas vestibulum. Integer metus metus, elementum at magna vel, cursus commodo urna.</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--2x1">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--2x1">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside cds--aspect-ratio cds--aspect-ratio--2x1">
        <div class="inside">1</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.

1
1
1
1
Code
<div class="cds--grid bleed">
  <div class="cds--row">
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--col">
      <div class="outside">
        <div class="inside">1</div>
      </div>
    </div>
    <div class="cds--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

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