Grids are defined by using the grid and col-X class where X represents the number of columns and can be 1, 2, 3, 4, 6 or 8.

Examples without inter-cell gaps:

div.grid.col-1>div

Cell #1

div.grid.col-2>div*2

Cell #1

Cell #2

div.grid.col-6>div*6

Cell #1

Cell #2

Cell #3

Cell #4

Cell #5

Cell #6

Inter-cell gaps can also be setup by using the grid-gap-X or col-gap-X classes and replacing the X with the standard size suffixes.

Examples with inter-cell gaps:

div.grid.col-3.grid-gap-' . $gapSize . '>div*6

'); echo('

'); for($iGap = 1; $iGap <= 6; $iGap++) { echo('

Cell #' . $iGap . '

'); } echo('

'); } ?>

TODO: All mobile rules, Add non-identical sizing

Click to show/hide all classes

grid Defined a grid container

'); echo(''); echo(''); echo(''); } ?>

grid-col-1	col-1	Specifies the column count
grid-col-'.$gridColCount.'	col-'.$gridColCount.'

'); echo(''); echo(''); echo(''); } ?>

grid-gap-xs	gap-xs	Specifies the inter-cell gap size
grid-gap-'.$gridGapSize.'	gap-'.$gridGapSize.'

'); ?>