The Material Design layout grid is made up of three elements: columns, gutters, and margins.
Writing for web should fulfil a clear purpose, and address the unique requirements of the online medium.
Columns, gutters, margins and breakpoints
Columns
Content is placed in the areas of the screen that contain columns.
Column width is defined using percentages, rather than fixed values, to allow content to flexibly adapt to any screen size. The number of columns displayed in the grid is determined by the breakpoint range (a range of predetermined screen sizes) at which a screen is viewed, whether it’s a breakpoint for mobile, tablet, or another size.
Gutters
Gutters are the spaces between columns. They help separate content.
Gutter widths are fixed values at each breakpoint range. To better adapt to the screen, gutter width can change at different breakpoints. Wider gutters are more appropriate for larger screens, as they create more whitespace between columns.
Margin
Margins are the space between content and the left and right edges of the screen.
Margin widths are defined as fixed values at each breakpoint range. To better adapt to the screen, the margin width can change at different breakpoints. Wider margins are more appropriate for larger screens, as they create more whitespace around the perimeter of content.
Breakpoints
A ‘breakpoint’ is a predefined viewport width. The GUI framework utilises 5 breakpoints. At each breakpoint we have the option to make adjustments to the interface design or layout using CSS. For example, we can adjust how many columns an element should span, the size of the text, its colour, visibility etc.
Below showcases the 5 breakpoints:
Breakpoints
| Grid | Artboards | Content | Margin | Column | Gutter |
|---|---|---|---|---|---|
| Minimum | 375px | 16px | 10px | 10px | 20px |
| Small | 544px | 24px | 27px | 27px | 16px |
| Medium | 768px | 24px | 46px | 46px | 16px |
| Large | 992px | 24px | 64px | 64px | 16px |
| Maximum | 1278px | 24px | 46px | 46px | 16px |
Minimum
Artboard: 375px
Content: 343px
Margin: 16px
Column: 10px
Gutter: 20px
Small
Artboard: 544px
Content: 343px
Margin: 16px
Column: 10px
Gutter: 20px
Medium
Artboard: 768px
Content: 343px
Margin: 16px
Column: 10px
Gutter: 20px
Large
Artboard: 992px
Content: 343px
Margin: 16px
Column: 10px
Gutter: 20px
Maximum
Artboard: 1278px
Content: 343px
Margin: 16px
Column: 10px
Gutter: 20px
Frequently asked questions
Do I need to know HTML and CSS?
Not really but it certainly helps if you do. This article only covers the basic principles. The best way to get your head around the grid is to get stuck in and have a play.
Do I design mobile first?
When responsive design took off it quickly became apparent that designing mobile first was the best approach. Designing for the smallest viewport and working up would seem like the obvious thing to do. However, in our experience this approach also comes with drawbacks. Designers often focus too much on the mobile (XS view) and struggle to make their mobile designs work in the larger views. The same applies when designers focus too much on the desktop (LG view) then struggle to make the design work in smaller views. In reality when designing a responsive interface, designers should consider all breakpoints when making any design decision.
Do I design for every breakpoint?
This depends on your design. Complex layouts will require more rigorous design support. The more design you do upfront the fewer issues you’ll have in build. For large projects, we normally design re-usable components and provide component libraries where each component is designed at all 4 breakpoints. This allows developers to focus on building robust, responsive components that can then be assembled into templates.
Do I have to use the grid?
We recommend using the grid not just because it works well but also for consistency throughout the customer journey. Using the grid will help maintain consistent spacing, scale and rhythm across all our digital touch points. Using the grid also removes a lot of the potential cross browser bugs often encountered when designing responsive applications.
Can I change the grid - columns, column widths, margins etc?
No.
Can elements break out of the grid?
Yes, page furniture like headers, footers and navigation images often break out of the grid.
What about content?
You should definitely have an awareness of how your content will appear across all break points. However, designing a content strategy for your responsive design is a whole different topic and beyond the scope of this article.