Experimental
Use the grid system with caution. We're currently taking it for a spin with a few squads to see if any improvements are needed.
The grid
To create a grid, add the class .ox-grid to the div containing the cells. This will create a 12 column grid with a gap of 1rem (16px).
By default all direct children are interpreted as a full-width cell. This prevents us from having to add an extra class to make the cells span over 12 columns (since we're working mobile first, in most cases cells start off occupying the entire width and as the screens get larger more cells will be placed next to each other).
1
2
3
4
<div class="ox-grid">
<div>Full-width cell</div>
<div>Full-width cell</div>
</div>
Cell width
To define the width of a cell, we've created classes .ox-grid__cell-{amount-of-cols}-wide. As mentioned before, we have a 12 column grid so this will only work with values from 1 up to 12.
1
2
3
4
5
6
7
8
9
10
<div class="ox-grid">
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-6-wide">6-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-8-wide">8-wide</div>
</div>
Please note that when consecutive cells do not occupy a total width of 12 columns, gaps will appear in your grid.
1
2
3
4
5
6
7
8
<div class="ox-grid">
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-5-wide">5-wide (cause of gap)</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
<div class="ox-grid__cell-4-wide">4-wide</div>
</div>
Cell height
In the previous example you might have noticed you have to state the amount of columns wide you want your cells to be, this is because we also allow cells to span over an amount of rows. You can do this by adding the following class .ox-grid__cell-{amount-of-rows}-high.
& 2-high
1
2
3
4
5
6
7
8
9
10
11
<div class="ox-grid">
<div class="ox-grid__cell-6-wide ox-grid__cell-2-high">6-wide <br>& <b>2-high</b></div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
</div>
In contrast to the width of a column that is defined by the width of the grid, the height of the rows is defined by it's content. This means that the rows can vary in height according to the amount of content in their cells.
& 2-high
cell with more content which causes the entire row to be higher
cell with more content
1
2
3
4
5
6
7
8
9
10
11
<div class="ox-grid">
<div class="ox-grid__cell-6-wide ox-grid__cell-2-high">6-wide <br>& 2-high</div>
<div class="ox-grid__cell-3-wide"><b>3-wide</b> <br>cell with more content which causes the entire row to be higher</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide">3-wide</div>
<div class="ox-grid__cell-3-wide"><b>3-wide</b> <br>cell with more content</div>
</div>
Breakpoints
For grids that are the same from the smallest of devices to the largest screens, use the ox-grid__cell-*-wide classes. When they do vary, you can add an additional breakpoint reference (s, m or l) to the class as followed .ox-grid__cell-*-wide-{breakpoint}-up.
- no breakpoint: min. width = 0em (0px)
- s-up: min. width = 37.5em (600px)
- m-up: min. width = 60em (960px)
- l-up: min. width = 64em (1024px)
You may have noticed that there's only one bound (min. width) set for all the breakpoints... We did this to prevent an overload of classes defining the same thing. (e.g. if you have cells that are full-width on extra small and small screens but go to 3 columns width on medium and large screens, you'll only have to add the ox-grid__cell-3-wide-m-up class instead of having to define the small and large breakpoint as well.
In the following example you'll see how different classes all have the same result on large screens, but have different outcomes when making your window smaller.
1
2
3
4
5
6
7
8
9
10
<div class="ox-grid">
<div class="ox-grid__cell-3-wide">3 wide</div>
<div class="ox-grid__cell-9-wide">9-wide</div>
<div class="ox-grid__cell-3-wide-s-up">12 wide | 3-wide-s-up</div>
<div class="ox-grid__cell-9-wide-s-up">12-wide | 9-wide-s-up</div>
<div class="ox-grid__cell-3-wide-m-up">12 wide | 3-wide-m-up</div>
<div class="ox-grid__cell-9-wide-m-up">12-wide | 9-wide-m-up</div>
<div class="ox-grid__cell-3-wide-l-up">12 wide | 3-wide-l-up</div>
<div class="ox-grid__cell-9-wide-l-up">12-wide | 9-wide-l-up</div>
</div>
Of course this also applies to the classes that define the height of the cells as followed .ox-grid__cell-{breakpoint}-*-high.
& 4-high | m-3-high
1
2
3
4
5
6
7
8
9
<div class="ox-grid">
<div class="ox-grid__cell-s-6-wide ox-grid__cell-4-high ox-grid__cell-m-3-high">12 wide | s-6-wide <br>& <b>4-high | m-3-high</b></div>
<div class="ox-grid__cell-6-wide ox-grid__cell-3-wide-m-up">6-wide | m-3-wide</div>
<div class="ox-grid__cell-6-wide ox-grid__cell-3-wide-m-up">6-wide | m-3-wide</div>
<div class="ox-grid__cell-6-wide ox-grid__cell-3-wide-m-up">6-wide | m-3-wide</div>
<div class="ox-grid__cell-6-wide ox-grid__cell-3-wide-m-up">6-wide | m-3-wide</div>
<div class="ox-grid__cell-6-wide ox-grid__cell-3-wide-m-up">6-wide | m-3-wide</div>
<div class="ox-grid__cell-6-wide ox-grid__cell-3-wide-m-up">6-wide | m-3-wide</div>
</div>