Use the layout grid for organizing space, text, images, and other elements used in design. Following a grid while designing user interfaces (UI) provides consistent design across various screen sizes.

The design system utilizes a responsive 12-column layout grid.

Terms

ColumnsThere are 12 columns in the responsive grid. Column widths change with the size of the grid.

GuttersGutters are the gaps between columns. Gutter widths are a fixed value of 16px ($spacer-2).

Grid marginsGutter margins are the outer margins of the grid. From 0-543px the grid margins are 16px ($spacer-2) from 544px (small breakpoint) and up the grid margins are 32px ($spacer-4).

Layout regionsAreas of the layout that contain the content. Layout regions can span any number of columns and resize with the grid.

The grid consists of three distinct pieces:

1. Containers add a maximum width and centers the content
2. Rows enable layout and contains the columns
3. Columns determine the number of columns an item will span across, out of a possible 12 per row

Breakpoints

The grid system utilizes breakpoints to adapt designs at various viewport sizes.

Default behavior

Columns without a set width will automatically layout with equal widths. The columns will automatically wrap when they don't fit a single row.

<section class="ds-l-container example-grid">
  <div class="ds-l-row">
    <div class="ds-l-col">Equal</div>
    <div class="ds-l-col">Equal</div>
    <div class="ds-l-col">Equal</div>
    <div class="ds-l-col">Equal</div>
  </div>
</section>

Column spanning

Layout regions can span any number of columns and are separated by the grid gutter. Layouts can change at any of the designated breakpoints.

Specify the number of columns (1-12) to span using .ds-l-col--* classes. These classes will span * columns. So, if you want two elements that each span half the row, you would use .ds-l-col--6

<section class="ds-l-container example-grid">
  <div class="ds-l-row">
    <div class="ds-l-col--6">6 columns</div>
    <div class="ds-l-col--6">6 columns</div>
  </div>
</section>

Natural width columns

Use a .ds-l-col--auto class to size a column to the natural width of its content.

<section class="ds-l-container example-grid">
  <div class="ds-l-row">
    <div class="ds-l-col--auto">1 of 3</div>
    <div class="ds-l-col--auto">A little bit longer text</div>
    <div class="ds-l-col--auto">3 of 3</div>
  </div>
</section>

Nested grids

<section class="ds-l-container example-grid">
  <div class="ds-l-row">
    <div class="ds-l-col--9">
      Level 1
      <div class="ds-l-row">
        <article class="ds-l-col--4">Level 2</article>
        <article class="ds-l-col--4">Level 2</article>
        <article class="ds-l-col--4">Level 2</article>
      </div>
    </div>
    <div class="ds-l-col--3">Level 1</div>
  </div>
</section>

Offsetting columns

The page content does not always need to span across 12 columns; it can occupy a smaller region in the center of the page. This example shows an 8-column layout region with an offset of 2 columns on both sides.

Offset columns using the margin auto utility class:

<section class="ds-l-container example-grid">
  <div class="ds-l-row">
    <div class="ds-l-col--8 ds-u-margin-left--auto ds-u-margin-right--auto">
      8 columns, offset
    </div>
  </div>
</section>

Alignment

Align columns horizontally or vertically using flexbox utility classes. To align columns horizontally, use the justify-content utility class. To align columns vertically, use the align-items utility class.

<section class="ds-l-container example-grid">
  <div
    class="ds-l-row ds-u-justify-content--start ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
  >
    <div class="ds-l-col--3">Left</div>
  </div>
  <div
    class="ds-l-row ds-u-justify-content--center ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
  >
    <div class="ds-l-col--3">Center</div>
  </div>
  <div
    class="ds-l-row ds-u-justify-content--end ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
  >
    <div class="ds-l-col--3">Right</div>
  </div>
  <div
    class="ds-l-row ds-u-align-items--start ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
    style="height: 100px"
  >
    <div class="ds-l-col--3">Top</div>
  </div>
  <div
    class="ds-l-row ds-u-align-items--center ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
    style="height: 100px"
  >
    <div class="ds-l-col--3">Center</div>
  </div>
  <div
    class="ds-l-row ds-u-align-items--end ds-u-border--1 ds-u-padding--1 ds-u-margin-y--2"
    style="height: 100px"
  >
    <div class="ds-l-col--3">Bottom</div>
  </div>
</section>

Form rows

Use a .ds-l-form-row class to tighten the column spacing when laying out form fields in a grid.

<section class="example-grid">
  <div class="ds-l-form-row">
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--0" for="city">City</label>
      <input type="text" class="ds-c-field" id="city" name="city" />
    </div>
    <div class="ds-l-col--auto">
      <label class="ds-c-label ds-u-margin-top--0" for="state">State</label>
      <input type="text" class="ds-c-field" id="state" name="state" />
    </div>
  </div>
</section>

Responsive grids

Use a breakpoint prefix to change the column widths based on the viewport width.

Responsive format: .ds-l-[breakpoint]-col--*

In the example below, the cells span:

• 6 cells per row on xl viewports, using .ds-l-xl-col--2
• 4 cells per row on lg viewports, using .ds-l-lg-col--3
• 3 cells per row on md viewports, using .ds-l-md-col--4
• 2 cells per row on sm viewports, using .ds-l-sm-col--6
• The entire width of the row on viewports smaller than the sm breakpoint, using .ds-l-col--12

Guidance

Best practices

• Choose a single grid system for the entire site.
• Consider small screens as part of the design process and create layouts that adapt or change to accommodate various viewport sizes as needed.
• Use layout regions to section page content.
• Grid gutters are there to create spacing between the layout regions. Do not extend the layout regions into the gutters.

When to use

• Use to place UI elements into consistent responsive columns and page layouts.

When to consider alternatives

• Avoid mixing this grid and other grid systems.

Usage

• Choose a 12-column grid with flexible column widths and fixed gutters.
• Avoid text lines longer than 75 characters. Place text in narrower columns to keep text lines from becoming too wide or use the measure utility classes.

Accessibility

• Low-vision users should be able to increase the size of the text by up to 200 percent without breaking the layout.
• The DOM order and visual presentation of content should be consistent, in order to not break keyboard navigation. This means you should avoid changing the flexbox order property of the grid columns.
• Consider the main goal, purpose, and user task of the page/workflow when deciding which page content area to span and ensure the layout supports user who many have cognitive delay or low literacy.
• Follow the grid consistently to help support the brain while skimming and scanning and reduce cognitive load when trying to make sense of an inconsistently layout experience.
• Ensure primary interaction elements like call to action buttons appear in similar location to reduce the amount of time it takes users to select thees elements and reduced the time to locate these elements.

Customization

The following Sass variables can be overridden to customize the grid:

• $grid-columns
• $grid-gutter-width

Learn more

• A Complete Guide to Flexbox
• Flexbox & the keyboard navigation disconnect