|Number of watchers on Github||868|
|Number of open issues||14|
|Average time to close an issue||13 days|
|Average time to merge a PR||3 days|
|Open pull requests||2+|
|Closed pull requests||1+|
|Last commit||about 1 month ago|
|Repo Created||over 1 year ago|
|Repo Last Updated||8 days ago|
|Organization / Author||devlint|
|Do you use gridlex? Leave a review!|
|View open issues (14)|
|View gridlex activity|
|View on github|
Trendy new open source projects in your inbox! View examples
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
I just wanna use it in my page!
To use Gridlex out of the box, call the gridlex.min.css file in your project :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.2.4/gridlex.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.4/gridlex.min.css">
I want to include it in my source files!
Because I'm working with Less, Gridlex comes first in Less (with less-compilation Grunt task).
But there is the same version in Sass in the
Include gridlex/src/gridlex.less or gridlex/src/gridlex.scss
1- The basic. Just add a class
.grid-* (from -1 to -12)
<div class="grid-1"> <div class="col">...</div> </div>
2- The precise. Compose cell by cell (with class like
<div class="grid"> <div class="col-12">...</div> </div>
3- The automatic. Just add number of cells you want in the grid (
.grid > .col)
<div class="grid"> <div class="col">...</div> <div class="col">...</div> </div>
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
|CSS Media Query||Applies||Usage|
npm install gridlex --save
bower install gridlex --save
See more : http://gridlex.devlint.fr
Fix typo 'gl--_md-0' to 'gl-_md-0' in less file cf. https://github.com/devlint/gridlex/pull/35
-noWraphelper to grid classes.