Grix
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
. 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.
Class name | Size |
---|---|
.gutter-xs0 |
0rem |
.gutter-xs1 |
0.5rem |
.gutter-xs2 |
0.75rem |
.gutter-xs3 |
1rem |
.gutter-xs4 |
1.25rem |
.gutter-xs5 |
1.5rem |
.gutter-xs6 |
1.75rem |
.gutter-xs7 |
2rem |
Responsive breakpoints
Name | Media queries |
---|---|
xs | Don't have media queries because it's the first element in grix. |
sm | screen and (min-width: 600px) |
md | screen and (min-width: 960px) |
lg | screen and (min-width: 1280px) |
xl | screen and (min-width: 1920px) |