Page header
Page navigation (optional)
60px
80px
Section with 6 columns (A)
30px
1
20px
30px
2
30px
30px
3
20px
30px
4
30px
30px
5
20px
30px
6
60px
Section with 6 columns (B)
30px
30px
1
30px
2
30px
3
30px
4
30px
5
30px
6
60px
80px
Section with 4 columns (A)
30px
1
20px
30px
2
30px
20px
30px
3
20px
30px
4
60px
Section with 4 columns (B)
30px
1
30px
20px
2
30px
3
30px
20px
4
60px
80px
Section with 3 columns
30px
1
30px
20px
30px
2
30px
20px
30px
3
60px
80px
Section with 1 column
30px
1
60px
80px
Section with 2 unequal columns - 66/33
30px
1
30px
30px
2
60px
80px
Section with complex layout
The following is an example of a complex layout. The columns are 50/50 with another 50/50 column layout nested inside the second column; this creates an overall layout of 50/25/25
30px
1
30px
30px
2
30px
20px
30px
3
40px
60px