Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.
The concept is simple: you need to wrap your .col in a .grid.
$3
- Basically each column is the same width as every other cell in the grid.
- But you can add sizing classes to individual columns.
- For responsive designs, you can add classes based on media-queries.
- Top, bottom, or middle. For the grid. And for the columns.
- Grids can be nested. Always. Directly in a column.
$3
I just wanna use it in my page!
To use Gridlex out of the box, call the gridlex.min.css file in your project :
Via cdnjs:
``html
`
I want to include it in my source files!
Just include gridlex/src/gridlex.scss
and
update the $gl- vars:
Variable names
Default value
$gl-colCount:
12
$gl-gridName:
grid
$gl-colName:
col
$gl-attributeName:
class
$gl-gutter:
1rem
$gl-gutter-vertical:
1rem
$gl-mq-width:
'max-width'
$gl-mq-list:
(
lg: 80em, // max 1280px
md: 64em, // max 1024px
sm: 48em, // max 768px
xs: 36em // up to 576px
)
$3
npm install gridlex --save
$3
bower install gridlex --save
$3
1- The basic. Just add a class .grid-* (from -1 to -12)
`html
...
`
2- The precise. Compose cell by cell (with class like .col-*)
`html
...
`
3- The automatic. Just add number of cells you want in the grid (.grid > .col)
`html
...
...
`
$3
Because of responsive, you sometimes need to change the size of columns: with this keys as classes you can control your layout by media-queries.
Columns can be hidden at breakpoints using _*-0 (e.g. col-4_md-6_sm-0`)