12
Grids & Containers
When designing for web and mobile, the purpose of the pages or interfaces we design is to create various user flows. As user flows often contain multiple screens or windows that repeat similar design schemes and layouts, grids ease the process of developing wireframes, templates, or standardized layouts for similar pages. We use grids to map out the design capabilities on our page. Our containers provide set margins to keep the content within it.
Grids
Grids help split pages horizontally and vertically, using rows and columns. Grid systems serve as a systematic approach that allows designers to lay out elements in an organized manner, and provide a modular approach to designing components for multiple pages or layouts. Grids also define a consistent set of fixed units of measurement that dictate the sizing, spacing, and alignment that each design element must abide by.
6
6
4
4
4
3
3
3
3
2
2
2
2
2
2
We also have the capabilities to do non-uniform layouts.
2 columns
8
4
4
8
9
3
3
9
2
10
7
5
5
7
3 columns
3
6
3
2
8
2
4 columns
5
1
5
1
1
5
1
5
4
2
4
2
2
4
2
4
Containers
Containers control how the content within it displays on the page.
Full Width
No margins, will fit the page size
Wide
1960px
Normal
1152px
Narrow
960px
Extra Narrow
760px