Grid

This 12-column, responsive grid provides structure for website content.

The design uses an underlying 12 column grid, yet we use only a few combinations of column layouts. This keeps the total possible number of patterns to a minimum. Primarily, we use the full-width, 1/2-, 1/3-, and 1/4 width elements in combination with each other to create our layouts.

1/12
 
 
 
 
 
 
 
 
 
 
 
100%
1
1/2
 
1/3
 
 
1/4
 
 
 

Most common grid layouts

Content with side element before

1/4
3/4


Content with side element after

2/3
1/4


Content with side element before and after

1/4
1/2
1/4