Grix

Grix uses a 12 columns grid system easily configurable with our builder (soon) or directly in scss variables.
For all examples below, you can resize your browser to visualize changing.

Basic grix system

The basic grix system can hold a maximum of 12 columns. To use them, simly add some elements into a div with a class named .grix. This grix class needs a breakpoint and a number to show the number of columns you want.
You can overpass the number of columns in your grix div, as in the exemple below we have 5 columns into a xs4 grix, so the 5th is gone at the 2nd line.

Responsive

Make grix responsive easily, use these breakpoints to make it responsive.
Use these breakpoints as a prefix, followed by a number, from 1 to 12 to get the number of columns from this breakpoint to the next one. But grix is strong and if you only precise .xs2 for example, you will get 2 columns from the "xs" breakpoint to any screensize.
Resize your browser to understand the example below.

Col / Rows - Sizing & Responsive

Any column into a grix can take multiple rows or multiple columns.
Using the .row- prefix followed by the same system of breakpoints seen before, you can make a column take multiple rows.
Using the class .col- will make a column width take multiple ones, respecting the breakpoints precised into the column class.
To understand this, look at the example below. The "box 2" on a xs screen is taking 1 row and 3 columns; 3 rows for a small screen, and on a medium screen and higher is taking 2 columns and 2 rows. At the same time, the last box is taking 4 columns at any time, because of the mention of .xs4 only, so it will take 4 columns for all higher breakpoints.

Nesting

Grix can be used inside another one. You can see on the example below two columns, each one containing a new grix. Try resizing your browser to see the effect of the responsive on this. The higher grix will put the right column under the left one because of the .xs1 breakpoint.

Positions

Positioning your columns inside the grix can be really helpful. Using the .pos- prefix, you can place any box at any place of your row if there is no places taken after this one on the same row. For example, if you have 4 columns on a row, and you add a column at .pos-xs2, this column will go on the next row and is gonna be placed at the 2nd place.

Commonly, .pos-xs1 is used to create a new row.

Row positions

The .pos-row- prefix allows you to move any div to any row inside your grix.
As you can see in the example below, the BOX 2 has a .pos-row-sm1 class, which means that this box will be at the first row on "sm" screens, and because the grix has the .sm2 class and the BOX 2 the .col-sm2 class seen before, the BOX 2 will take the full width of the first row on "sm" screens !
Resize your browser to visualize changing

Gutters

Gutters makes you able to separate the columns with a bigger gap than the original-one.
Again, using our breakpoints, you can change the gutter size depending on the screensize. The basic gap is 0.25rem.