Evo

Layout Grid

experimental Evo does not require usage of any particular grid system. Evo offers this experimental grid for solving basic needs for page layout and positioning inside of a container. Very basic, almost rudimentary.

If you need a more powerful grid with well defined mobile responsive states, consider a third-party solution such as Bootstrap's grid, Foundation's grid, or Flexbox grid.

Note that Evo was originally was intended to augment and layer upon a framework such as Bootstrap, so reliance on a more familiar third party grid is intentional and advantageous. If you really must be original, try pushing the Evo grid into new and adventerous territory, or even make your own. :-)

12 Column Grid

grid-12
grid-11
grid-1
grid-10
grid-2
grid-9
grid-3
grid-8
grid-4
grid-8
grid-2
grid-2
grid-7
grid-5
grid-6
grid-6
grid-6
grid-3
grid-3
grid-5
grid-7
grid-4
grid-4
grid-4
grid-3
grid-3
grid-3
grid-3
grid-2
grid-5
grid-5

Evolution features a basic 12 column responsive grid. Create an HTML tag using <div> or <section>, and apply an grid-[number] class. To fix any layout issues try using the clearfix class on the very last element.


   <p class="color-0"></p>

12 Column Grid

grid-12
grid-11
grid-1
grid-10
grid-2
grid-9
grid-3
grid-8
grid-4
grid-7
grid-5
grid-6
grid-6
grid-5
grid-7
grid-4
grid-8
grid-3
grid-9
grid-2
grid-10
grid-1
grid-11

Evolution features a basic 12 column responsive grid. Create an HTML tag using <div> or <section>, and apply an grid-[number] class. To fix any layout issues try using the clearfix class on the very last element.


   <p class="color-0"></p>
Common Grid Variations

1-up-grid

grid-12

More grid variations can be found here.


   <p class="color-0"></p>
Common Grid Variations

1-up-grid

grid-12

2-up-grid

grid-6
grid-6

3-up-grid

grid-4
grid-4
grid-4

4-up-grid

grid-3
grid-3
grid-3
grid-3

6-up-grid

grid-2
grid-2
grid-2
grid-2
grid-2
grid-2

More grid variations can be found here.


   <p class="color-0"></p>
4 Column Grid Variations
1
2
3
4
1
2
1
2
1
2
3

More grid variations can be found here.


   <p class="color-0"></p>
3 Column Grid Variations
1
2
3
1
2
1
2
3
1
2
3
4
1
2
3
4
5
6

More grid variations can be found here.


   <p class="color-0"></p>
3 Column Grid Variations - Extended

1-up-grid

1

2-up-grid

1
2
1
2
1
2

3-up-grid

1
2
3
1
2
3

4-up-grid

1
2
3
4
1
2
3
4

6-up-grid

1
2
3
4
5
6

12-up-grid

1
2
3
4
5
6
7
8
9
10
11
12

More grid variations can be found here.


   <p class="color-0"></p>
7 Column Grid Variations

7-up-grid

1
2
3
4
5
6
7
1
2
3
4
5
6
7
1
2
3
4
5
6
7
1
2
3
4
5
6
7

More grid variations can be found here.


   <p class="color-0"></p>