Grid System

The grid system should be used for creating page layouts through a series of columns that contain your content. The system is responsive and works with every screen size, its columns scale proportionally according to screen sizes. The grid has a maximum 12 columns a minimum of 4 columns. If your design requires less than 12 columns reduce the amount only by even numbers.  Please only use the Gutters & Margins defined in the table to the right.

If you can’t see any Grid Visuals select Artboard and got to View -> Canvas -> Show Layout.

Desktop Grid @1440px with Sidebar

Sketch Layout Calculation for screens ≤ 1440px with Sidebar:

1. Artboard width – Sidebar width = Content Area
2. Content Area – Margin*2 = Total Width
3. Sidebar width + Margin = Offset

 

Example Calculation for screens ≤ 1440px with Sidebar:

1. 1440px – 80px = 1360px
2. 1360px – 50px*2 = 1260px
3. 80px + 50px = 130px

 

Desktop Grid @1440px no Sidebar

Sketch Layout Calculation for screens ≤ 1440px no Sidebar:

1. Artboard width = Content Area
2. Content Area – Margin*2 = Total Width
Offset = 0 – Select just “Center”


Example Calculation for screens ≤ 1440px with Sidebar:

1. 1440px = 1440px
2. 1440px – 50px*2 = 1340px
Offset = 0 – Select just “Center”

Tablet Grid @768px with Sidebar

Tablet Grid @768px no Sidebar

Smartphone Grid @375px with Tabbar

Smartphone Grid @375px no Tabbar

Large Screen Grid @1440px with Sidebar

 

 

Large Screen Grid @1440px no Sidebar