# Simple (Responsive) Grid
TIP
Based on Gridlex (opens new window)
# 1. Basic
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-2
grid-3
grid-4
grid-5
grid-6
grid-7
grid-8
grid-9
grid-10
grid-11
grid-12
hide code
<div class="grid-1">
<div class="col">
<div class="-demo"><p>grid-1</p></div>
</div>
</div>
<div class="grid-2">
<div class="col">
<div class="-demo"><p>grid-2</p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
</div>
<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>
<div class="grid-4_xs-2">
<div class="col">
<div class="-demo"><p>grid-4</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>
<div class="grid-5_xs-2">
<div class="col">
<div class="-demo"><p>grid-5</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>
<div class="grid-6_sm-3">
<div class="col">
<div class="-demo"><p>grid-6</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>
<div class="grid-7_md-3">
<div class="col">
<div class="-demo"><p>grid-7</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>
<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>
<div class="grid-9_lg-3">
<div class="col">
<div class="-demo"><p>grid-9</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 class="col">
<div class="-demo"><p> </p></div>
</div>
</div>
<div class="grid-10_md-5_sm-2">
<div class="col">
<div class="-demo"><p>grid-10</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 class="col">
<div class="-demo"><p> </p></div>
</div>
<div class="col">
<div class="-demo"><p> </p></div>
</div>
</div>
<div class="grid-11_md-5_sm-2">
<div class="col">
<div class="-demo"><p>grid-11</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 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>
<div class="grid-12_lg-8_md-6_sm-4_xs-2">
<div class="col">
<div class="-demo"><p>grid-12</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 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
hide code
<div class="grid-3_xs-1">
<div class="col">
<div class="-demo">
<p>grid-1</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>grid-1</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>grid-1</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>grid-1</p>
</div>
</div>
</div>
# 2. Compose Cell by Cell
col-12
col-6
col-3
col-3
hide code
<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
hide code
<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. You can also mix all three ways
.col
col-2_sm-12
col-6_sm-12
hide code
<div class="grid">
<div class="col -demo">.col</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>
:::
# Grid without Gutter
.grid-noGutter
col-12
col-6
col-6
hide code
<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>
# 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
hide code
<div class="grid">
<div class="col-6_sm-12"><p class="-demo-explain">Just an "empty" col-6:</p></div>
<div class="col-6_sm-12"><p class="-demo-explain">Each column can become a grid too (<code>.col-6.grid</code>)
</p></div>
<div class="col-6_sm-12">
<div class="-demo">
<p>col-6</p>
</div>
</div>
<div class="col-6_sm-12 grid">
<div class="col-4">
<div class="-demo">
<p>col-4</p>
</div>
</div>
<div class="col-8 grid">
<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 class="col-4">
<div class="-demo">
<p>col-4</p>
</div>
</div>
<div class="col-4">
<div class="-demo">
<p>col-4</p>
</div>
</div>
<div class="col-4">
<div class="-demo">
<p>col-4</p>
</div>
</div>
</div>
</div>
</div>
# 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
hide code
<div class="grid">
<div class="col-12 lg-hidden">
<div class="-demo"><p>This column is hidden up to _lg breakpoint</p></div>
</div>
<div class="col-12 md-hidden">
<div class="-demo"><p>This column is hidden up to _md breakpoint</p></div>
</div>
<div class="col-12 sm-hidden">
<div class="-demo"><p>This column is hidden up to _sm breakpoint</p></div>
</div>
<div class="col-12 xs-hidden">
<div class="-demo"><p>This column is hidden up to _xs breakpoint</p></div>
</div>
</div>
# Horizontal Alignment
(default)
.grid-center
.grid-right
hide code
<div class="grid-3">
<div class="col">
<div class="-demo">
<p>(default)</p>
</div>
</div>
</div>
<div class="grid-3-center">
<div class="col">
<div class="-demo">
<p>.grid-center</p>
</div>
</div>
</div>
<div class="grid-3-right">
<div class="col">
<div class="-demo">
<p>.grid-right</p>
</div>
</div>
</div>
# Vertical Alignment
# Vertical Top Alignment (= default)
.grid
(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.
...
hide code
<div class="grid">
<div class="col">
<div class="-demo">
<p>(default)</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>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.</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>...</p>
</div>
</div>
</div>
# 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.
...
hide code
<div class="grid-middle">
<div class="col">
<div class="-demo">
<p>.grid-middle</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>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.</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>...</p>
</div>
</div>
</div>
# 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.
...
hide code
<div class="grid-bottom">
<div class="col">
<div class="-demo">
<p>.grid-bottom</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>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.</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>...</p>
</div>
</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
hide code
<div class="grid-4-middle">
<div class="col">
<div class="-demo">
<p>default (middle)</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>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.</p>
</div>
</div>
<div class="col-bottom">
<div class="-demo">
<p>col-bottom</p>
</div>
</div>
<div class="col-top">
<div class="-demo">
<p>col-top</p>
</div>
</div>
</div>
# Reverse, order and other things
A
B
C
D
E
hide code
<div class="grid-5-reverse">
<div class="col">
<div class="-demo">
<p>A</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>B</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>C</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>D</p>
</div>
</div>
<div class="col">
<div class="-demo">
<p>E</p>
</div>
</div>
</div>