Layout Grid

Layout usage.

12 Column Grid

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

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


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

12 Column Grid

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

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


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

1-up-grid

evo-grid-12

More grid variations can be found here.


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

1-up-grid

evo-grid-12

2-up-grid

evo-grid-6
evo-grid-6

3-up-grid

evo-grid-4
evo-grid-4
evo-grid-4

4-up-grid

evo-grid-3
evo-grid-3
evo-grid-3
evo-grid-3

6-up-grid

evo-grid-2
evo-grid-2
evo-grid-2
evo-grid-2
evo-grid-2
evo-grid-2

More grid variations can be found here.


   <p class="evo-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="evo-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="evo-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="evo-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="evo-color-0"></p>