Want to take your software engineering career to the next level? Join the mailing list for career tips & advice Click here


Just a CSS Flexbox Grid System

Subscribe to updates I use gridlex

Statistics on gridlex

Number of watchers on Github 1304
Number of open issues 26
Average time to close an issue 13 days
Main language HTML
Average time to merge a PR 8 days
Open pull requests 4+
Closed pull requests 1+
Last commit over 2 years ago
Repo Created over 5 years ago
Repo Last Updated 5 months ago
Size 555 KB
Homepage http://gridlex.de...
Organization / Authordevlint
Latest Release2.7.1
Page Updated
Do you use gridlex? Leave a review!
View open issues (26)
View gridlex activity
View on github
Book a Mock Interview With Me (Silicon Valley Engineering Leader, 100s of interviews conducted)
Software engineers: It's time to get promoted. Starting NOW! Subscribe to my mailing list and I will equip you with tools, tips and actionable advice to grow in your career.
Evaluating gridlex for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)


Just a Flexbox Grid System

Join the chat at https://gitter.im/devlint/gridlex 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="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridlex@2.7.1/dist/gridlex.min.css" 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 : http://gridlex.devlint.fr

gridlex open issues Ask a question     (View All Issues)
  • about 4 years equalHeight not working in Safari Mac
  • about 4 years Websites build with Gridlex
  • about 4 years Element not visibility before sm-0 and md-0
  • about 4 years Incorrect working grid-* with fixed cols
  • about 4 years changelog?
  • over 4 years Custom gutter width
  • over 4 years Some SASS changes
  • over 4 years [Idea] Specify differents actions on breakpoint
  • over 4 years Add a helper to max height window
  • over 4 years Feature Request: Semantic Option
  • almost 5 years Custom Class Names and Breakpoints (scss)
gridlex open pull requests (View All Pulls)
  • noBottom and col padding-bottom
  • Fix typo 'gl-*-_md-0' to 'gl-*_md-0'
  • Update gridlex-vars.scss
  • Update index.html
gridlex list of languages used
Other projects in HTML
Powered by Autocode - Instant Webhooks, Scripts and APIs
Autocode logo wordmark