gridlex 0,1,2,1,2,0 grunt Bower npm

Just a CSS Flexbox Grid System

2 years after MIT


Just a Flexbox Grid System

Join the chat at v. 2.2.2

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.

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 :

Via cdnjs:

<link rel="stylesheet" href="">

Via jsdelivr:

<link rel="stylesheet" href="">

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

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>

*2- The precise. Compose cell by cell (with class like `.col-`)**

<div class="grid">
    <div class="col-12">...</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>

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 _*-0 (e.g. col-4_md-6_sm-0)

CSS Media Query Applies Usage
@media screen and (max-width: 35.5em) Max 568px _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-*



npm install gridlex --save


bower install gridlex --save

See more :

Related Repositories



A curated list of awesome CSS frameworks, libraries and software. ...

Top Contributors

oneTea devlint sconstantinides arhoads PeterDaveHello vlsoprun gitter-badger


package version
dev cssnano ^3.10.0
node-sass ^4.5.3
postcss-cli ^4.1.0


-   2.2.2 zip tar
-   2.2.1 zip tar
-   2.2.0 zip tar
-   2.1.1 zip tar
-   2.1.0 zip tar
-   2.0.9 zip tar
-   2.0.8 zip tar
-   2.0.7 zip tar
-   2.0.6 zip tar
-   2.0.5 zip tar
-   2.0.4 zip tar
-   2.0.3 zip tar
-   2.0.2 zip tar
-   2.0.1 zip tar
-   2.0.0 zip tar
-   1.0.1 zip tar
-   1.0.0 zip tar