Just a Flexbox Grid System
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
What can we expect?
- 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.
Less, Sass, CSS?
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.2/gridlex.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.2.2/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
3 ways to use Gridlex
*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 `.col-`)**
<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>
Gridlex and media-queries
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