v. 2.0.5

The concept is simple: you need to wrap your .col in a .grid.

• 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.

I just wanna use it in my page!

To use Gridlex out of the box, call the gridlex.css or gridlex.min.css file in your project :

<link rel="stylesheet" href="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 src folder.

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 .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>

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.

npm install gridlex --save

bower install gridlex --save

See more : http://gridlex.devlint.fr