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.
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.
o-grid to an HTML element
<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 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.
<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>
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.
<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.
<div class="o-grid o-grid--auto">
<div>Item</div>
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
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:
| Class | Minimum width |
|---|---|
o-grid o-grid--auto--sm |
70px |
o-grid o-grid--auto | 100px |
o-grid o-grid--auto--md | 165px |
o-grid o-grid--auto--lg
| 200px |
o-grid o-grid--auto--xl | 240px |
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.
<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>
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:
<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:
<div class="o-grid o-grid--auto o-grid__gap--0">
<div>Item</div>
<div>Item</div>
<div>Item</div>
</div>
The default 12 column grid. Here’s an overview of all the available span classes for this layout:
<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>
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.
<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:
<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:
<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>
<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>
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.
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 |