Skip to main content

U.S. flagU.S. flag

An official website of the United States government

CMS Design System

Download code and design filesView on GitHub

CMS Design System v2 is released!  See our migration guide.

Layout grid

Jump to guidance

Use the flexible grid system to structure and align content. The grid is responsive, powered by flexbox, and based on a twelve-column grid system.

The grid consists of three distinct pieces:

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

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.

New tab
Code snippet
<section class="ds-l-container preview__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>

Specifying number of columns

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

New tab
Code snippet
<section class="ds-l-container preview__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.

New tab
Code snippet
<section class="ds-l-container preview__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

New tab
Code snippet
<section class="ds-l-container preview__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

Offset columns using the margin auto utility class:

New tab
Code snippet
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--3">
      3 columns
    </div>
    <div class="ds-l-col--4 ds-u-margin-left--auto">
      4 columns, offset 5 columns
    </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.

New tab
Code snippet
<section class="ds-l-container preview__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.

New tab
Code snippet
<section class="preview__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 class="ds-c-field" type="text" 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 class="ds-c-field" type="text" 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
New tab
Code snippet
<section class="ds-l-container preview__grid">
  <div class="ds-l-row">
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      A
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      B
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      C
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      D
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      E
    </div>
    <div class="ds-l-col--12 ds-l-sm-col--6 ds-l-md-col--4 ds-l-lg-col--3 ds-l-xl-col--2">
      F
    </div>
  </div>
</section>

Guidance

When to use

  • Almost always use a grid layout — visitors can read more quickly on pages that use grids. Choose a single grid system for your entire site.

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.

Customization

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

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

Learn more