The grid system is the most powerful of the components in this framework.
To apply grid just add grid class to the parent of nodes, nodes will have a class cell with the number of columns to span, for example: cell-3. The maximum number of columns you can set on setup. Also if you leave only cell class without number this column will be auto width to rest of available space. There is also two more property of width of cell cell-fill and cell-auto, see more below.
Gris system has vertical and horizontal space between cell, we called gutter and space, the gutter is space between columns, and space is between row. You can dynamically change this space using extra class after or before the grid.
The cell will auto wrap, so if you want to be sure that they will be separated by a new row, just wrap them by new parent div with the class row.
Space and gutter will always the same, no matter if the cell will wrap automatically or wrap by row.
You could also change the width of the cell by responsive class, breaking points are set on variables. You could user prefix t-cell-{number} - tablet, tp-cell-{number} - tablet portrait, m-cell-{number} - mobile, mp-cell-{number} - mobile portrait
One more thing: offset-{number} or offset-right-{number} se this class on the cell to set offset (margin) on right and left side to the cell, works also with RWD prefix.
@grid: grid; //set grid
@cell: cell; //set cell
@grid-form: grid-form; // this class will be helpfull for using with all your forms and grid
@row: row; //set row
@column: column; // set cell as column
@column-force: column-force; // force set all child cell as column
@column-wrap: column-wrap; // set row and cell as column - stay width
@reverse: reverse; // reverce order
@release: release;
@keep-flex: keep-flex;
@gutter: gutter; // horizontal space between cell
@gutter-margin: gutter-margin;
@space: space; // vertical space between cell
@space-margin: space-margin;
@start-before: start-before;
@end-before: end-before;
@nowrap: nowrap; //prevent wrapping cell
@floating: floating; //set grid as float not flexbox
@justify-center: justify-center;
@justify-around: justify-around;
@justify-between: justify-beteen;
@justify-start: justify-start;
@justify-end: justify-end;
@vertical-center: vertical-center;
@vertical-start: vertical-start;
@vertical-end: vertical-end;
@vertical-items-center: vertical-items-center;
@vertical-items-streach: vertical-items-streach;
@vertical-items-start: vertical-items-start;
@vertical-items-end: vertical-items-end;
@items-center: items-center;
@items-streach:items-streach;
@items-start: items-start;
@items-end: items-end;
@offset: offset; //set offset on left from cell
@offset-left: offset-left; //set offset on left from cell
@offset-right: offset-right; //set offset on right from cell
@grid-steps: 16; //number of max number of columns in 100% width
@grid-step-fractions: true; // set true if you will be useing fractions of grid step otherwise false to reduce weight
@grid-gutter: true; // set true if you will be useing grid gutter otherwise false to reduce weight
@grid-space: true; // set true if you will be useing grid space otherwise false to reduce weight
@grid-offset: true; // set true if you will be useing grid offset otherwise false to reduce weight
@grid-gutter-start: 2; //gutter space will start counting from this step
@grid-gutter-steps: @layout-steps/2; //all gutter steps that you will be useing in your app, use as less as possible.
@grid-gutter-unit: @base-unit; //gutter unit get form @base-unit;
@grid-gutter-step: 0.3; //gutter step counter first step will be 2*0.3*unit (start*step*unit)
@grid-space-start: 2; //space will start counting from this step
@grid-space-steps: @layout-steps/2; //all spaces steps
@grid-space-unit: @base-unit; //space unit
@grid-space-step: 0.3; // space step counter first step will be 2*0.3*unit (start*step*unit)
