JavaScript is required

Grids - Digital guide

There are no exact rules for how you should set-up your grids, however we’ve come up with some ideas to get you started.

These grids can be modified to suit the design intention and specific site requirements. The most important takeaway is your grids must be consistent across all page designs.

Desktop

12-column grid, gutters and margins approximately 50% of the column width.

Tablet

8-column grid, gutters and margins approximately 50% of the column width.

Mobile

4-column grid, gutters and margins approximately 50% of the column width.

Grids and responsiveness across devices is discussed in more detail in Responsive Design.

Updated

Join the conversation on digital

Get advice and share your insights with other digital practitioners. Join the Single Digital Presence Community of Practice(opens in a new window).