Grid system
A grid system can be used to align and size objects within a given format.
Usage#
- Basic rules that help you set up your pages in sketch.
- The responsive behavior of our grid has four breakpoints.
- The amount, width and spacing of the columns change with each breakpoint.
- Exception! The global header and footer live outside the bounds of the grid.
| 1. Columns | 2. Gutters | 3. Margins |
|---|---|---|
| Content is placed in the areas of the screen that contain columns. The number of displayed columns is determined by the breakpoint that is chosen. | Gutters are the spaces between columns. They help separate content. | Margins are the space between content and the left and right edges of the screen. |
Settings in Sketch#
| Type | LG | MD | SM | XS |
|---|---|---|---|---|
| Artboard | Desktop HD | Nexus 7 (landscape) | Nexus 7 (portrait) | iPhone SE |
| Viewport | 1280px | 960px | 600px | 320px |
| Columns | 12 columns | 12 columns | 4 columns | 2 columns |
| Gutters | 16px | 16px | 16px | 16px |
| Offset (Margins) | 88px / 88px | 8px / 8px | 8px / 8px | 8px / 8px |
| Layout settings |  |  |  |  |
Change log#
Changed#
Doc: "Grid system" | Clean up the documentation for the right structure and sentence case