Grids and Spacing

This design system uses the same grid framework as the Web Experience Toolkit, which was based on the Bootstrap framework to create page layouts. These systems include responsive grids, including sizes for mobile, tablets and desktops, and they're built using flexboxes and containers.

The grid system relies on a series of containers, columns and rows to build layout and align content. Containers center and horizontally pad content. Columns are the framework the content placement is built on. Rows act as wrappers for the columns.

The grid framework contains 12 columns that scale according to the viewport of the user's device. Further customization of grids and column layouts, such as offsetting and nesting, is possible through the Web Experience Toolkit's framework. Viewport width is in pixels, and does not change the font size.

Auto-layout Grid Examples

Equal-width

If the size of columns are not defined, they will automatically be set to equal widths.

Column 1
Column 2
Column 3
Column 4
<div class="container">
  <div class="row">
    <div class="col">
     Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
    <div class="col">
      Column 4
    </div>
  </div>
</div>

Unequal-width

When you set the size for one column, sibling columns will automatically resize.

Column 1
Column 2
Column 3
Column 4
<div class="container">
  <div class="row">
    <div class="col-6">
     Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
    <div class="col">
      Column 4
    </div>
  </div>
</div>

Variable Width Content

You can set columns to automatically fit the content they contain. Sibling columns will automatically resize.

Column 1
Column 2
This is the third and largest column due to auto-sizing
Column 4
<div class="container">
  <div class="row">
    <div class="col">
     Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      This is the third and largest column due to auto-sizing
    </div>
    <div class="col">
      Column 4
    </div>
  </div>
</div>

Equal-width Multi-row

Multiple equal columns and rows can be set with a line break.

Column 1
Column 2
Column 3
Column 4
Column 1
Column 2
Column 3
Column 4
<div class="container">
  <div class="row">
    <div class="col">
     Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
    <div class="col">
      Column 4
    </div>
  </div>
  <div class="row">
    <div class="col">
     Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
    <div class="col">
      Column 4
    </div>
  </div>
</div>