Grids are defined by combining the .grid and .grid-col-X classes where X represents the number of columns and can be 1, 2, 3, 4, 6 or 8.
div.grid.grid-col-1>div
div.grid.grid-col-2>div*2
div.grid.grid-col-6>div*6
Inter-cell gaps can also be setup by using the grid-gap-X classes and replacing the X with the standard size suffixes.
div.grid.grid-col-3.grid-gap-' . $gapSize . '>div*6
'); } ?>grid Defined a grid container
|
grid-col-1 |
Specifies the column count | grid-col-'.$gridColCount.' | ');
//echo('col-'.$gridColCount.' | ');
echo('');
}
?>
|
grid-gap-xs |
Specifies the inter-cell gap size | grid-gap-'.$gridGapSize.' | ');
//echo('gap-'.$gridGapSize.' | ');
echo('');
}
?>
TODO: All mobile rules, Add non-identical sizing