Grid

Responsive layout grid

The responsive grid consists of rows and columns. Depending on the screen width these may change.

For making the responsive grid. The CSS grid system is used.

Breakpoints

In order to make grid response the following grid points are used. It is possible to change the amount of columns, margins and gutters for each breakpoint. However for ease of use all the breakpoints have an equal amount of columns. The margins are on the outside of a grid. The gutter is the space between columns

Range (px)	Window	Columns	Margins/ Gutters (px)
0 - 599	xs	12	16
600 - 1023	sm	12	24
1024 - 1439	md	12	24
1440 - 1919	lg	12	24
1920 +	xl	12	24

Container

Before using the grid you can also use a class .container. The container is mainly used for giving a size to the content of the page. By default the container is smaller than the screen but when you add the class .container--fluid you can make the container fullscreen.

Classes

With the grid and the breakpoints quite a few classes come along.

Window	Class	Result
xs	xs1 - xs12	Element width
	start-xs1 - start-xs12	Column starting position
	xs__text--(right, left or center)	Text alignment
	xs-(only, up, and-down)-(show, hide)	Show/ hide element
sm	sm1 - sm12	Element width
	start-sm1 - start-sm12	Column starting position
	sm__text--(right, left or center)	Text alignment
	sm-(only, up, and-up, down, and-down)-(show, hide)	Show/ hide element
md	md1 - md12	Element width
	start-md1 - start-md12	Column starting position
	md__text--(right, left or center)	Text alignment
	md-(only, up, and-up, down, and-down)-(show, hide)	Show/ hide element
lg	lg1 - lg12	Element width
	start-lg1 - start-lg12	Column starting position
	lg__text--(right, left or center)	Text alignment
	lg-(only, up, and-up, down, and-down)-(show, hide)	Show/ hide element
xl	xl1 - xl12	Element width
	start-xl1 - start-xl12	Column starting position
	xl__text--(right, left or center)	Text alignment
	xl-(only, and-up, down)-(show, hide)	Show/ hide element

Columns

A few examples of columns

12 columns

4 columns

6 columns

3 columns

start 7 rendered 1

start 1 rendered 2

    
<div class="row">
    <div class="xs12 text-center blue">12 columns</div>

    <div class="xs4 text-center blue">4 columns</div>
    <div class="xs4 text-center blue">4 columns</div>
    <div class="xs4 text-center blue">4 columns</div>

    <div class="xs6 text-center blue">6 columns</div>
    <div class="xs6 text-center blue">6 columns</div>

    <div class="xs6 text-center blue">6 columns</div>
    <div class="xs3 text-center blue">3 columns</div>
    <div class="xs3 text-center blue">3 columns</div>

    <div class="xs6 text-center blue start-xs7">start 7 rendered 1</div>
    <div class="xs6 text-center blue start-xs1">start 1 rendered 2</div>
</div>