Grid Layout

The grid systems main purpose is to help create consistent page layouts through predefined columns. It offers easy component placement, consistency over our product offering and helps designers and developers get started quicker.

A 12 column grid design approach

By using the grid to design layouts, consistency is guaranteed. The default grid has 16px gaps. We’ll also show you exactly how to customize it for your use-case.

To build a grid:

  1. Add a grid container by adding o-grid to an HTML element
  2. Add as many elements as you want inside of your grid container
Item
Item
Item

<div class="o-grid">
  <div class="o-grid__span-col--1">Item</div>
  <div class="o-grid__span-col--1">Item</div>
  <div class="o-grid__span-col--1">Item</div>
</div>

Each column takes a percentage of the width available to fit the 12. So 8.3% width columns, or the minimum width of the item content as each item occupies only one column by default. For an item to take more space it needs to span columns.

Grid items width

Grid items span all columns by default for a mobile first approach. If you want a wider item you need to specify a certain number of columns to span, you can easily control that by adding a column span class, start with the prefix o-grid__span-col-- and then the desired number.

Item
Item
Item
Item

<div class="o-grid">
  <div class="o-grid__span-col--2">Item</div>
  <div class="o-grid__span-col--3">Item</div>
  <div>Item</div>
  <div class="o-grid__span-col--6">Item</div>
</div>

Auto columns grid

In some cases a more flexible approach may be neccesary, you can add the o-grid o-grid--auto class to make columns to takes an equal percentage of the width available, minus the grid gap. In this case, that’s 33.3% of the container’s width. Once content is added, the sections expand as needed to fit the content if spanning classes are not used.

Item
Item
Item

<div class="o-grid o-grid--auto">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Adding a fourth column means they’ll each take up 25% of the width of the container.

Item
Item
Item
Item

<div class="o-grid o-grid--auto">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Minimum widths

The auto columns grid container sets a minimum width for the items, if there is not enough space the item will wrap to another row to keep their dimensions.

There is 5 minimum width variations to use:

ClassMinimum width
o-grid o-grid--auto--sm 70px
o-grid o-grid--auto100px
o-grid o-grid--auto--md165px
o-grid o-grid--auto--lg 200px
o-grid o-grid--auto--xl240px

Fix column grid

Use this container class when a certain fix number of columns are needed, start by adding the prefix o-grid--fix-- and then the desired number of columns (1 to 12). Unless a responsive class overrides it, t will keep that column number at all viewport sizes and the the grid items will expand or shrink with them.

Item
Item
Item
Item
Item
Item

<div class="o-grid o-grid--fix--6">
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
    <div>Item</div>
</div>

Column gaps

By default, we start with 16px gaps on our columns. There’s 2 other options available, small o-grid__gap--sm (8px) and none o-grid__gap--0.

Small gap example:

Item
Item
Item

<div class="o-grid o-grid--auto o-grid__gap--sm">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Example with no gaps:

Item
Item
Item

<div class="o-grid o-grid--auto o-grid__gap--0">
  <div>Item</div>
  <div>Item</div>
  <div>Item</div>
</div>

Full grid layout

The default 12 column grid. Here’s an overview of all the available span classes for this layout:

1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
2/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
3/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
4/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
5/12
1/12
1/12
1/12
1/12
1/12
1/12
1/12
6/12
1/12
1/12
1/12
1/12
1/12
1/12
7/12
1/12
1/12
1/12
1/12
1/12
8/12
1/12
1/12
1/12
1/12
9/12
1/12
1/12
1/12
10/12
1/12
1/12
11/12
1/12
12/12

<div class="o-grid">
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--2">2/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--3">3/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--4">4/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--5">5/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--6">6/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--7">7/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--8">8/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--9">9/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--10">10/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--11">11/12</div>
  <div class="o-grid__span-col--1">1/12</div>
  <div class="o-grid__span-col--12">12/12</div>
</div>

No Rows Needed

Popular grid systems like Bootstrap, require a row wrapper element for every given row. This is not needed. Multiple rows are achieved with filling columns according to the 12 column layout.

6/12
6/12
6/12

<div class="o-grid">
  <div class="o-grid__span-col--6">6/12</div>
  <div class="o-grid__span-col--6">6/12</div>
  <div class="o-grid__span-col--6">6/12</div>
</div>

If you add more than 12 columns it will position the element on a row below.

You can use the o-grid__span-col--all class to force a row too:

4/12
4/12
All
4/12

<div class="o-grid">
  <div class="o-grid__item o-grid__span-col--4">4/12</div>
  <div class="o-grid__item o-grid__span-col--4">4/12</div>
  <div class="o-grid__item o-grid__span-col--all">All</div>
  <div class="o-grid__item o-grid__span-col--4">4/12</div>
</div>

The gap classes o-grid__gap--sm, o-grid__gap--0 also apply to the rows:

All
4/12
8/12
All
6/12

<div class="o-grid o-grid__gap--sm">
  <div class="o-grid__span-col--all">All</div>
  <div class="o-grid__span-col--4">4/12</div>
  <div class="o-grid__span-col--8">8/12</div>
  <div class="o-grid__span-col--all">All</div>
  <div class="o-grid__span-col--6">6/12</div>
</div>

All
4/12
8/12
All
6/12

<div class="o-grid o-grid__gap--0">
  <div class="o-grid__span-col--all">All</div>
  <div class="o-grid__span-col--4">4/12</div>
  <div class="o-grid__span-col--8">8/12</div>
  <div class="o-grid__span-col--all">All</div>
  <div class="o-grid__span-col--6">6/12</div>
</div>

Responsive layouts

The grid system can become responsive to your viewport size by prefixing our sizing and ordering classes with a breakpoint name. Our responsive sizing utilities are built upon a mobile first approach.

To achieve the desired outcome of this approach, you will need to append responsive grid and grid span classes to an element that override the previous breakpoint.

This means the grid container and grid span class used will start at the smallest width and continue to be applied until a responsive class for a specific breakpoint overrides it.

Responsive layout options

Below is an overview table outlining the default behavior for columns and how that behavior may change for responsive breakpoints. There are six grid breakpoints, one for each responsive breakpoint: xsmall, xsmall, small, medium, large, xlarge, xxlarge and xxlarge. To use them, add the responsive class to the end of any of the applicable classes (e.g. o-grid--fix--6@large)

Classes Variations 400px 600px 800px 1000px 1200px 1400px
o-grid @xsmall @small @medium @large @xlarge @xxlarge
o-grid--fix --1 to --12 @xsmall @small @medium @large @xlarge @xxlarge
o-grid o-grid--auto --sm, --md, --lg, --xl @xsmall @small @medium @large @xlarge @xxlarge
o-grid__span-col --1 to --12 @xsmall @small @medium @large @xlarge @xxlarge