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
.
That's all.
Gridlex is ready to use "out of the box" in CSS, with all the vendor prefixes needed:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gridlex/2.0.8/gridlex.min.css">
OR
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridlex/2.0.8/gridlex.min.css">
Or you can use Less or Sass files included!
.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>
.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>
.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>
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>
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>
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>
(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>
(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>
.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>
.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>
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>
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>
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>
A (last)
B
C
D
E (first)
<div class="grid">
<div class="col-last">A</div>
<div class="col">B</div>
<div class="col">C</div>
<div class="col">D</div>
<div class="col-first">E</div>
</div>
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>
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>
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>
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>
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>
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>
col-6 push-left="off-6"
<div class="grid">
<div class="col-6" push-left="off-6">col-6 push-left="off-6"</div>
</div>
col-4
col-4 push-left="off-4"
<div class="grid">
<div class="col-4">col-4</div>
<div class="col-4" push-left="off-4>col-4 push-left="off-4"</div>
</div>
col-2 push-left-2
col-2 push-left="off-2"
col-2 push-left="off-2"
col-2 push-right="off-2"
col-2 push-right="off-2"
col-2 push-right="off-2"
col-2
col-6 push-left="off-1" push-right="off-1"
col-2
<div class="grid">
<div class="col-2" push-left="off-2">col-2 push-left="off-2"</div>
<div class="col-2" push-left="off-2">col-2 push-left="off-2"</div>
<div class="col-2" push-left="off-2">col-2 push-left="off-2"</div>
<div class="col-2" push-right="off-2">col-2 push-right="off-2"</div>
<div class="col-2" push-right="off-2">col-2 push-right="off-2"</div>
<div class="col-2" push-right="off-2">col-2 push-right="off-2"</div>
<div class="col-2"</div>
<div class="col-6" push-left="off-1" push-right="off-1">col-6 push-left="1" push-right="1"</div>
<div class="col-2"</div>
</div>
.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
.col
-* (1 to 12)
_xs-* (1 to 12)
_sm-* (1 to 12)
_md-* (1 to 12)
_lg-* (1 to 12)
i.e. <div class="col-12_lg-8_md-6_sm-3_xs-1">...</div>
.col-first
.col-last
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)
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-* |
Gridlex use Autoprefixer to add vendors prefixes needed.
Made by @webdevlint