Have ideas to improve npm?Join in the discussion! »


    2.7.1 • Public • Published


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

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">

    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


    npm i gridlex

    DownloadsWeekly Downloads






    Unpacked Size

    566 kB

    Total Files


    Last publish


    • avatar