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://cdnjs.cloudflare.com/ajax/libs/gridlex/2.7.1/gridlex.min.css">
Or you can use Sass (.scss) files included: See Sass documentation!
.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 gridlex="grid-3_xs-1">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="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 gridlex="grid">
<div gridlex="col-12">...</div> <!-- first row: one column -->
<div gridlex="col-6">...</div> <!-- second row: three columns (6+3+3) -->
<div gridlex="col-3">...</div>
<div gridlex="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 gridlex="grid"> <!-- Four <div gridlex="col"> for 4 columns in the grid -->
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
</div>
col-8
col
col
col
col-5
col-2
col-1
col
col
col
col
col
col
col
<div gridlex="grid-6_sm-2">
<!-- first row -->
<div gridlex="col-8_sm-12">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<!-- second row -->
<div gridlex="col">...</div>
<div gridlex="col-5_sm-6">...</div>
<div gridlex="col-2">...</div>
<div gridlex="col-1_sm-4">...</div>
<div gridlex="col">...</div>
<!-- third row -->
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
</div>
auto
col-2
col-6
<div gridlex="grid">
<div gridlex="col">...</div>
<div gridlex="col-2_sm-12">...</div>
<div gridlex="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 gridlex="grid-noGutter">
<div gridlex="col-12">...</div>
<div gridlex="col-6">...</div>
<div gridlex="col-6">...</div>
<div gridlex="col-4">...</div>
<div gridlex="col-8">...</div>
<div gridlex="col-3">...</div>
<div gridlex="col-9">...</div>
<div gridlex="col-1">...</div>
<div gridlex="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 gridlex="grid">
<div gridlex="col-6">
col-6
</div>
<div gridlex="col-6 grid">
<div gridlex="col-4">
col-4
</div>
<div gridlex="col-8 grid">
<div gridlex="col-6">
col-6
</div>
<div gridlex="col-6">
col-6
</div>
<div gridlex="col-4
col-4
</div>
<div gridlex="col-4">
col-4
</div>
<div gridlex="col-4">
col-4
</div>
</div>
</div>
</div>
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 gridlex=col-12 lg-hidden"></div>
<div gridlex=col-12 md-hidden"></div>
<div gridlex=col-12 sm-hidden"></div>
<div gridlex=col-12 xs-hidden"></div>
(default)
.grid-center
.grid-right
<div gridlex="grid-3">
<div gridlex="col">...</div>
</div>
<div gridlex="grid-3-center">
<div gridlex="col">...</div>
</div>
<div gridlex="grid-3-right">
<div gridlex="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 gridlex="grid">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="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 gridlex="grid-middle">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="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 gridlex="grid-bottom">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="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 gridlex="grid-4-middle">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col-bottom">...</div>
<div gridlex="col-top">...</div>
</div>
A
B
C
D
E
<div gridlex="grid">
<div gridlex="col">A</div>
<div gridlex="col">B</div>
<div gridlex="col">C</div>
<div gridlex="col">D</div>
<div gridlex="col">E</div>
</div>
A
B
C
D
E
<div gridlex="grid-reverse">
<div gridlex="col">A</div>
<div gridlex="col">B</div>
<div gridlex="col">C</div>
<div gridlex="col">D</div>
<div gridlex="col">E</div>
</div>
A (last)
B
C
D
E (first)
<div gridlex="grid">
<div gridlex="col-last">A</div>
<div gridlex="col">B</div>
<div gridlex="col_md-first">C (first only on _md)</div>
<div gridlex="col">D</div>
<div gridlex="col-first">E</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas laboriosam inventore minima facere possimus quisquam.
<div gridlex="grid-noGutter-equalHeight">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
</div>
col-3
col-auto
col-2
<div gridlex="grid-noGutter-noBottom">
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="col">...</div>
<div gridlex="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 gridlex="grid-spaceBetween">
<div gridlex="col-2">...</div>
<div gridlex="col-2">...</div>
<div gridlex="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 gridlex="grid-spaceAround">
<div gridlex="col-2">...</div>
<div gridlex="col-2">...</div>
<div gridlex="col-2">...</div>
</div>
col-2
col-2
col-2
<div gridlex="grid-center">
<div gridlex="col-2">...</div>
<div gridlex="col-2">...</div>
<div gridlex="col-2">...</div>
</div>
A
B
C
<div gridlex="grid-column">
<div gridlex="col-4">A</div>
<div gridlex="col-2">B</div>
<div gridlex="col-6">C</div>
</div>
A
B
C
<div gridlex="grid-column-reverse">
<div gridlex="col-4">A</div>
<div gridlex="col-2">B</div>
<div gridlex="col-6">C</div>
</div>
col-6 data-push-left="off-6"
<div gridlex="grid">
<div gridlex="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 gridlex="grid">
<div gridlex="col-4">col-4</div>
<div gridlex="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 gridlex="grid">
<div gridlex="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
<div gridlex="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
<div gridlex="col-2" data-push-left="off-2">col-2 data-push-left="off-2"</div>
<div gridlex="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
<div gridlex="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
<div gridlex="col-2" data-push-right="off-2">col-2 data-push-right="off-2"</div>
<div gridlex="col-2"</div>
<div gridlex="col-6" data-push-left="off-1" data-push-right="off-1">col-6 data-push-left="1" data-push-right="1"</div>
<div gridlex="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
-noBottom
-noWrap
.col
-* (1 to 12)
_xs-* (1 to 12)
_sm-* (1 to 12)
_md-* (1 to 12)
_lg-* (1 to 12)
e.g. <div gridlex="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...)
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)
*-hidden
(e.g. col-4_md-6 sm-hidden
)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-* |
So that Gridlex fits into your workflow, you can import it and override the next variables:
Variable names | Default value |
---|---|
$gl-gridName: |
grid |
$gl-colName: |
col |
$gl-attributeName: |
class |
$gl-gutter: |
1rem |
$gl-gutter-vertical: |
1rem |
$gl-mq-list: |
|