Skip to content
Just a CSS Flexbox Grid System
CSS JavaScript
Branch: master
Clone or download

Latest commit

Latest commit 72df83e Jun 6, 2018


Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Version 2.7.1 Feb 26, 2018
docs Version 2.7.1 Feb 26, 2018
src Version 2.7.1 Feb 26, 2018
.gitignore Fix Sass version and change dist/ to docs/ Aug 18, 2016
LICENSE add LICENSE file May 3, 2016 Fix ```html in readme Jun 6, 2018
bower.json Version 2.7.1 Feb 26, 2018 V2.4 (#58) Jul 17, 2017
package-lock.json 2.7.0 Feb 23, 2018
package.json Version 2.7.1 Feb 26, 2018
postcss.config.js V2.4 (#58) Jul 17, 2017


Just a Flexbox Grid System

Join the chat at v. 2.7.1

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.

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 CDN:

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


<link rel="stylesheet" href="" integrity="sha256-z8OrWCce0gDjwavCHKqxiPIo74u8go25fRiqW6jefXk=" crossorigin="anonymous">

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'
         lg: 80em, // max 1280px
         md: 64em, // max 1024px
         sm: 48em, // max 768px
         xs: 36em // up to 576px

Install via Npm

npm install gridlex --save

Install via Bower

bower install gridlex --save

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

You can’t perform that action at this time.