Just a Flexbox Grid System
npm install @labeg/gridlexBased 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.
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: | |
.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`)| CSS Media Query | Applies | Usage |
|---|---|---|
@media screen and (max-width: 36rem) | Max 576px | _xs-* |
@media screen and (max-width: 48em) | Max 768px | _sm-* |
@media screen and (max-width: 64em) | Max 1024px | _md-* |
@media screen and (max-width: 80em) | Max 1280px | _lg-* |
See more : http://labeg.github.io/gridlex/