Powerful and lightweight grid system based on CSS-Grid.
Grix uses a 12 columns grid system which you can master easily.
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 class needs a breakpoint and a number to show
the amount of columns you want.
You can overpass the amount 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.
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 amount of columns from this breakpoint to the next one.
But grix is strong and if you only specify
.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.
.row- prefix followed by the same system of
breakpoints seen before, you can make an item height be multiple rows.
Using the class
.col- will make a
column width to be multiple columns, 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.
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
Positioning your columns inside the grix can be really helpful.
you can place any box at any place in your row if there is no places taken after this one on the
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
.pos-xs1 is used to create a new row.
.pos-row- prefix allows you to move any box to any row inside
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 makes you able to separate the columns with a bigger gap than the
Again, using our breakpoints, you can change the gutter size depending on the screensize.
The basic gap is 0.25rem.
|Don't have media queries because it's the first element in grix.
screen and (min-width: 600px)
screen and (min-width: 960px)
screen and (min-width: 1280px)
screen and (min-width: 1920px)