A grid system conveys balance and structure to your application, which reduces cognitive load to your users. By properly organizing your content into a preset measurement, information becomes clearer and the experience improves overall.

The design system supports a percentage-based, flexbox grid to ensure precision while accommodating for both fixed and fluid containers. The current levels are:

• 10-100% (10-column grid, in increments of 10%)
• 25-75% (4-column grid, in increments of 25%)
• 33.333%, 66.666% (3-column grid)

Two consecutive columns are separated by a gutter of one unit of spacing (1rem/16px).

Our grid system supports offsetting columns to accommodate different spacing requirements. This becomes especially useful if there's a need to highlight a section of content that fits better into a smaller space, while still accommodating to the grid's measurements.

The design system's grid implementation supports a 75rem maximum width global container where your application can live. Since the grid system is based on flexbox — as opposed to fixed width columns —, it is responsive and adaptive by design.

If your application requires a different layout where a grid lives inside a nested location, you may choose to do that, as the container we recommend only exercises that role.

Currently there are three major viewports the design system targets:

• Desktop (62rem/990px and up)
• Tablet (between 30rem/576px and 62rem/990px)
• Mobile (up to 30rem/576px)

Our grid system allows for defining different widths for each of these different viewports.

In the example below, enable a different viewport by selecting the 4th icon from the toolbar.

On smaller viewports:

• Typically they cannot handle more than one or two columns. Therefore, it is advised that you don't exceed that number. Written copy and images should be displayed at the full extent of the viewport.
• Your application's container must extend the full width of the viewport.

Typically, an implementation of a grid includes:

• A container (optional) — ul-grid__container
• A row in which other columns fit — ul-grid__row
• Columns — ul-grid__column
  • Columns without modifiers will be distributed equally across a row.
  • To define a width percentage, use -x<percentage> . See Subdivisions.
  • To define a width percentage for a specific viewport, use -x<percentage>-<viewport>. Available options are: mobile, tablet, desktop.
  • To offset a column by a width percentage from the left, use -offset-<percentage>. See Spacing.

Here is a full example of a group of columns aligned in a grid.

<div class="ul-grid__container">
        <div class="ul-grid__row -wrap">
          <div class="ul-grid__column -x10 -offset-10-desktop -x100-mobile">
            <div class="column-fill">Column</div>
          </div>
      
          <div class="ul-grid__column -x60 -x100-mobile">
            <div class="column-fill">Column</div>
          </div>
      
          <div class="ul-grid__column -x20 -x100-mobile">
            <div class="column-fill">Column</div>
          </div>
        </div>
      </div>