Gridlex

Just a Flexbox Grid System
(v2.7.1)

Simple. Robust. Responsive. Flexible. Built with Sass.

Based on Flexbox (CSS Flexible Box Layout Module), Gridlex is a very simple css grid system to quickly create modern layouts and submodules.

View Project Source Fork Gridlex Download (zip)

How it works?

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

That's all.

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.

How to use Gridlex (in SCSS)?

Or you can use Sass (.scss) files included: See Sass documentation!

See Sass documentation

Built with Gridlex!

Discover who and how Gridlex is used around the world!

Discover the expo

3 ways to use Gridlex

1. The basic. Just add a class .grid-* (from -1 to -12)

This feature is so simple, but we find it very very rarely in a robust and flexible grid!
Why should we be required to put sizing classes on every single cell when they all have the same width?

In this ways, you will always have the specified number of columns in a row:

grid-1

grid-2

 

grid-3

 

 

grid-4

 

 

 

grid-5

 

 

 

 

grid-6

 

 

 

 

 

grid-7

 

 

 

 

 

 

grid-8

 

 

 

 

 

 

 

grid-9

 

 

 

 

 

 

 

 

grid-10

 

 

 

 

 

 

 

 

 

grid-11

 

 

 

 

 

 

 

 

 

 

grid-12

 

 

 

 

 

 

 

 

 

 

 

But what happens if we have more than 3 columns in a .grid-3 ?
This:

col 1

col 2

col 3

col 4

col 5

col 6

col 7

col 8

col 9

col 10

<div class="grid-3_xs-1">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

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

col-12

col-11

col-1

col-10

col-2

col-9

col-3

col-8

col-4

col-7

col-5

col-6

col-6

col-5

col-7

col-4

col-8

col-3

col-9

col-2

col-10

col-1

col-11

<div class="grid">
    <div class="col-12">...</div> <!-- first row: one column -->
    <div class="col-6">...</div> <!-- second row: three columns (6+3+3) -->
    <div class="col-3">...</div>
    <div class="col-3">...</div>
</div>

3. The automatic. Just add number of cells you want in the grid (.grid > .col):

Auto width columns, no size on cells !
That's a pretty cool feature of flex: the number determines the width (size = grid/cells children).

Tip: Keep in mind that in this way, your grid will only be a row!

So here we have a grid with one column...

auto

... another one with four columns...

auto

auto

auto

auto

... and last a grid with ... nine columns?

auto

auto

auto

auto

auto

auto

auto

auto

auto

<div class="grid"> <!-- Four <div class="col"> for 4 columns in the grid -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Did I mention that you can mix the 3 ways?

col-8

col

col

col

col-5

col-2

col-1

col

col

col

col

col

col

col

<div class="grid-6_sm-2">
    <!-- first row -->
    <div class="col-8_sm-12">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <!-- second row -->
    <div class="col">...</div>
    <div class="col-5_sm-6">...</div>
    <div class="col-2">...</div>
    <div class="col-1_sm-4">...</div>
    <div class="col">...</div>
    <!-- third row -->
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

auto

col-2

col-6

<div class="grid">
    <div class="col">...</div>
    <div class="col-2_sm-12">...</div>
    <div class="col-6_sm-12">...</div>
</div>

We can have a grid without gutter too:

col-12

col-6

col-6

col-4

col-8

col-3

col-9

col-1

col-11

<div class="grid-noGutter">
    <div class="col-12">...</div>
    <div class="col-6">...</div>
    <div class="col-6">...</div>
    <div class="col-4">...</div>
    <div class="col-8">...</div>
    <div class="col-3">...</div>
    <div class="col-9">...</div>
    <div class="col-1">...</div>
    <div class="col-11">...</div>
</div>

... and nesting in the grid:

Just an "empty" col-6:

Each column can become a grid too (.col-6.grid)

col-6

col-4

col-6

col-6

col-4

col-4

col-4

<div class="grid">
    <div class="col-6">
        col-6
    </div>
    <div class="col-6 grid">
        <div class="col-4">
            col-4
        </div>
        <div class="col-8 grid">
            <div class="col-6">
                col-6
            </div>
            <div class="col-6">
                col-6
            </div>
            <div class="col-4">
                col-4
            </div>
            <div class="col-4">
                col-4
            </div>
            <div class="col-4">
                col-4
            </div>
        </div>
    </div>
</div>

We can also compose a complex grid:

Top box
Lorem ipsum

Middle box
Lorem ipsum

Bottom box
Lorem ipsum

Center box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

Wide box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Tall box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Integer sollicitudin, tortor a mattis commodo, velit urna rhoncus erat, vitae congue lectus dolor consequat libero. Donec leo ligula, maximus et pellentesque sed, gravida a metus. Cras ullamcorper a nunc ac porta. Aliquam ut aliquet lacus, quis faucibus libero. Quisque non semper leo.

Side box
Lorem ipsum dolor sit amet, consectetur adipisicing elit!

Main box
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi aspernatur atque cum dignissimos dolorem doloribus hic libero non placeat possimus quisquam quod recusandae, repellat reprehenderit sit sunt, voluptatibus. Cum eveniet facere nemo obcaecati quaerat sed!

Tall box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Morbi maximus, leo sit amet vehicula eleifend, nunc dui porta orci, quis semper odio felis ut quam.

Suspendisse varius ligula in molestie lacinia. Maecenas varius eget ligula a sagittis. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Aenean vitae gravida diam, finibus dignissim turpis. Sed eget varius ligula, at volutpat tortor.

Wide box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

Small box
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Top box
Lorem ipsum

Bottom box
Lorem ipsum

Center box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

Main box
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus distinctio laboriosam porro qui quidem sint.

Side box
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores est hic omnis quis unde, voluptatem!

Left
Lorem ipsum dolor sit amet.

Center
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque eum id illo inventore iusto minus nobis qui, totam voluptatibus?

Left
Lorem ipsum dolor sit amet.

Center
Lorem ipsum dolor sit amet, consectetur adipisicing elit!

Columns can be hidden at breakpoints:

This column is hidden up to _lg breakpoint

This column is hidden up to _md breakpoint

This column is hidden up to _sm breakpoint

This column is hidden up to _xs breakpoint

<div class="col-12 lg-hidden"></div>
<div class="col-12 md-hidden"></div>
<div class="col-12 sm-hidden"></div>
<div class="col-12 xs-hidden"></div>

Horizontal alignment

(default)

.grid-center

.grid-right

<div class="grid-3">
    <div class="col">...</div>
</div>
<div class="grid-3-center">
    <div class="col">...</div>
</div>
<div class="grid-3-right">
    <div class="col">...</div>
</div>

Vertical alignment on the grid: top

(default)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

<div class="grid">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Vertical alignment on the grid: middle

.grid-middle

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

<div class="grid-middle">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Vertical alignment on the grid: bottom

.grid-bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, dolorum eius esse id labore odit placeat tempora! Alias aliquam aut eaque nulla repudiandae, temporibus voluptatum.

...

<div class="grid-bottom">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Vertical alignment on the column: grid-middle & mixed columns

default (middle)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aperiam architecto aut, commodi deserunt dicta eligendi error incidunt inventore maiores mollitia officiis placeat quibusdam tempora unde veritatis vero voluptas. Ab consectetur delectus nam. Ab animi aspernatur, deserunt eos et, inventore iure laboriosam laborum minus nam nihil quae tempore tenetur ullam.

col-bottom

col-top

<div class="grid-4-middle">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col-bottom">...</div>
    <div class="col-top">...</div>
</div>

Reverse, order and other things

Normal flow

A

B

C

D

E

<div class="grid">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

Reverse flow

A

B

C

D

E

<div class="grid-reverse">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

Normal flow with ordering (first / last) (can be based on MQ keys)

A (last)

B

C (_md-first)

D

E (first)

<div class="grid">
    <div class="col-last">A (last)</div>
    <div class="col">B</div>
    <div class="col_md-first">C (first only on _md)</div>
    <div class="col">D</div>
    <div class="col-first">E (first)</div>
</div>

No gutter? Equal-height?

 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas laboriosam inventore minima facere possimus quisquam.

 

 

<div class="grid-noGutter-equalHeight">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

To remove all vertical margins?

Header elements without spaces?

col-3

col-auto

col-2

<div class="grid-noGutter-noBottom">
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
    <div class="col">...</div>
</div>

Distribution

Horizontal distribution (grid-spaceBetween)

If you add spaceBetween class, the distribution will have no margin around first and last elements :

col-2

col-2

col-2

<div class="grid-spaceBetween">
    <div class="col-2">...</div>
    <div class="col-2">...</div>
    <div class="col-2">...</div>
</div>

Horizontal distribution (spaceAround)

If you add grid-spaceAround class, the distribution will have margins around first and last elements :

col-2

col-2

col-2

<div class="grid-spaceAround">
    <div class="col-2">...</div>
    <div class="col-2">...</div>
    <div class="col-2">...</div>
</div>

Horizontal distribution (width grid-center)

col-2

col-2

col-2

<div class="grid-center">
    <div class="col-2">...</div>
    <div class="col-2">...</div>
    <div class="col-2">...</div>
</div>

Columns

A

B

C

<div class="grid-column">
    <div class="col-4">A</div>
    <div class="col-2">B</div>
    <div class="col-6">C</div>
</div>

Columns-reverse

A

B

C

<div class="grid-column-reverse">
    <div class="col-4">A</div>
    <div class="col-2">B</div>
    <div class="col-6">C</div>
</div>

Offset: push a col from left or from right

col-6 data-push-left="off-6"

<div class="grid">
    <div class="col-6" data-push-left="off-6">col-6 data-push-left="off-6"</div>
</div>

col-4

col-4 data-push-left="off-4"

<div class="grid">
    <div class="col-4">col-4</div>
    <div class="col-4" data-push-left="off-4>col-4 data-push-left="off-4"</div>
</div>

col-2 data-push-left-2

col-2 data-push-left="off-2"

col-2 data-push-left="off-2"

col-2 data-push-right="off-2"

col-2 data-push-right="off-2"

col-2 data-push-right="off-2"

col-2

col-6 data-push-left="off-1" data-push-right="off-1"

col-2

<div class="grid">
    <div class="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
    <div class="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
    <div class="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>

    <div class="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
    <div class="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
    <div class="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>

    <div class="col-2"</div>
    <div class="col-6" data-push-left="off-1" data-push-right="off-1">col-6 data-push-left="1" data-push-right="1"</div>
    <div class="col-2"</div>
</div>

Documentation: helpers

Grid & associated classes

.grid
  -* (1 to 12)
    _xs-* (1 to 12)
    _sm-* (1 to 12)
    _md-* (1 to 12)
    _lg-* (1 to 12)

  -center
  -right
  -middle
  -bottom
  -spaceBetween
  -spaceAround

  -reverse
  -column
  -column-reverse

  -noGutter
  -equalHeight
  -noBottom
  -noWrap

Columns & associated classes: 

.col
  -* (1 to 12)
  _xs-* (1 to 12)
  _sm-* (1 to 12)
  _md-* (1 to 12)
  _lg-* (1 to 12)
    e.g. <div class="col-12_lg-8_md-6_sm-3_xs-1">...</div>

  .col-first (or with key-suffixes _md-first...)
  .col-last (or with key-suffixes _md-last...)

Offsets: with data-push-left="" and data-push-right="" attributes

off-* (0 to 11)
  _xs-* (0 to 11)
  _sm-* (0 to 11)
  _md-* (0 to 11)
  _lg-* (0 to 11)

  -0: reboot the offset (can be usefull in responsive mode with key-suffixes)

Gridlex and media-queries

Because of responsive, you need sometimes to change the size of columns: with these keys as classes you can control your layout by media-queries.

Columns can be hidden at breakpoints using *-hidden (e.g. col-4_md-6 sm-hidden)

CSS Media Query Applies Usage
@media (max-width: 36em) Max 576px _xs-*
@media (max-width: 48em) Max 768px _sm-*
@media (max-width: 64em) Max 1024px _md-*
@media (max-width: 80em) Max 1280px _lg-*

Documentation: Sass variables

Variables

So that Gridlex fits into your workflow, you can import it and override the next variables:

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'
$gl-mq-list: 
(
  lg: 80em,
  md: 64em,
  sm: 48em,
  xs: 36em
)

When "Can I use" Gridlex?

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.