Grid
Layout grids define structure, hierarchy, and rhythm in your design. Working from a defined layout system allows you to work faster and more consistently, removing guesswork as you lay out responsive designs.
| Name | Value |
|---|---|
| 1 | 8.333333333333333% |
| 2 | 16.666666666666664% |
| 3 | 25% |
| 4 | 33.33333333333333% |
| 5 | 41.66666666666667% |
| 6 | 50% |
| 7 | 58.333333333333336% |
| 8 | 66.66666666666666% |
| 9 | 75% |
| 10 | 83.33333333333333% |
| 11 | 91.66666666666666% |
| 12 | 100% |
Grid layouts
Desktop 1,440px
1
2
3
4
5
6
7
8
9
10
11
12
Tablet 834px
1
2
3
4
5
6
Mobile Large 360px
1
2
3
4
Container grid layouts
12 columns (auto)
1
2
3
4
5
6
7
8
9
10
11
12
6 columns (auto)
1
2
3
4
5
6
5 columns (auto)
1
2
3
4
5
3 columns (auto)
1
2
3
2 columns (auto)
1
2
Screens
| Name | Value |
|---|---|
| desktop | 1440px |
| tablet | 834px |
| mobile | 360px |