Simple Responsive Grid
WARNING
Based on Gridlex (which is based on Flexbox). We used this because of missing CSS grid compatibility of Internet Explorer, could and should be replaced by CSS grid in the future!
See Gridlex Documentation for more examples.
1. Basics
Just add a class .grid-* (from -1 to -12) Why should we be required to put sizing classes on every single cell when they all have the same width? In this way, you will always have the specified number of columns in a row:
grid-1
grid-1
<div class="grid-1">
<div class="col">
<p>grid-1</p>
</div>
</div>grid-2
grid-2
<div class="grid-2">
<div class="col">
<p>grid-2</p>
</div>
<div class="col">
<p>grid-2</p>
</div>
</div>Responsive Class Modifiers
Example
.grid-3_xs-1means that on small screens, the grid will have 1 column, and on larger screens, it will have 3 columns.- Screens are defined as follows:
xs(extra small),sm(small),md(medium),lg(large).
grid-3
<div class="grid-3_xs-1">
<div class="col">
<div class="-demo"><p>grid-3</p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
</div>grid-8
<div class="grid-8_md-4">
<div class="col">
<div class="-demo"><p>grid-8</p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
</div>But what happens if we have more than 3 columns in a .grid-3 ? This:
grid-1
grid-1
grid-1
grid-1
2. Compose Cell by Cell
col-12
col-6
col-3
col-3
<div class="grid">
<div class="col-12"><div class="-demo"><p>col-12</p></div></div> <!-- first row: one column -->
<div class="col-6"><div class="-demo"><p>col-6</p></div></div> <!-- second row: three columns (6+3+3) -->
<div class="col-3"><div class="-demo"><p>col-3</p></div></div>
<div class="col-3"><div class="-demo"><p>col-3</p></div></div>
</div>3. Automatic Grid
Just add number of cells you want in the grid (.grid > .col):
col
col
col
col
<div class="grid"> <!-- Four <div class="col"> for 4 columns in the grid -->
<div class="col"><div class="-demo"><p>col</p></div></div>
<div class="col"><div class="-demo"><p>col</p></div></div>
<div class="col"><div class="-demo"><p>col</p></div></div>
<div class="col"><div class="-demo"><p>col</p></div></div>
</div>4. Mix all three ways
col
col-2_sm-12
col-6_sm-12
<div class="grid">
<div class="col"><div class="-demo"><p>col</p></div></div>
<div class="col-2_sm-12"><div class="-demo"><p>col-2_sm-12</p></div></div>
<div class="col-6_sm-12"><div class="-demo"><p>col-6_sm-12</p></div></div>
</div>5. Different Gutter Sizes
No Gutter / Gaps
.grid-noGutter
col-12
col-6
col-6
<div class="grid-noGutter">
<div class="col-12"><div class="-demo"><p>col-12</p></div></div>
<div class="col-6 -demo"><div class="-demo"><p>col-6</p></div></div>
<div class="col-6 -demo"><div class="-demo"><p>col-6</p></div></div>
</div>Large Gutter
.grid-lgGutter
col-12
col-6
col-6
<div class="grid-lgGutter">
<div class="col-12"><div class="-demo"><p>col-12</p></div></div>
<div class="col-6"><div class="-demo"><p>col-6</p></div></div>
<div class="col-6"><div class="-demo"><p>col-6</p></div></div>
</div>Extra Large Gutter
.grid-xlGutter
col-12
col-6
col-6
col-6
col-6
col-6
<div class="grid-xlGutter">
<div class="col-2"><div class="-demo"><p>col-6</p></div></div>
<div class="col-2"><div class="-demo"><p>col-6</p></div></div>
<div class="col-2"><div class="-demo"><p>col-6</p></div></div>
<div class="col-2"><div class="-demo"><p>col-6</p></div></div>
<div class="col-2"><div class="-demo"><p>col-6</p></div></div>
</div>6. Equal Height
.grid-equalHeight
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
col-6
col-6
7. Nesting
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
8. Hide columns 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
9. Horizontal Alignment
Example: .grid-3-center
(default)
.grid-center
.grid-right
10. Vertical Alignment
Vertical Top Alignment (= default)
(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.
...
Vertical alignment on the grid: middle
.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.
...
Vertical alignment on the grid: bottom
.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.
...
Vertical alignment on the column: grid-middle & mixed columns
Example: .grid-4-middle
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
11. Reverse, order and other things
Example: .grid-5-reverse
A
B
C
D
E
12. Distribution
Horizontal Distribution (space-between)
If you add spaceBetween class, the distribution will have no margin around first and last elements :
.grid-spaceBetween
A
B
C
<div class="grid-spaceBetween">
<div class="col-2">
...
</div>
<div class="col-2">
...
</div>
<div class="col-2">
...
</div>
</div>Horizontal Distribution (space-around)
.grid-spaceAround
A
B
C
<div class="grid-spaceAround">
<div class="col-2">
...
</div>
<div class="col-2">
...
</div>
<div class="col-2">
...
</div>
</div>Grid Columns
.grid-column
A
B
C
<div class="grid-column">
<div class="col-2">
...
</div>
<div class="col-2">
...
</div>
<div class="col-2">
...
</div>
</div>