Columns, gutters, margins and breakpoints
Columns
Columns hold page content. They occupy a percentage of the screen rather than having a fixed width, so that the content can be shown across different screen sizes at the same ratio.
Gutters
Gutters are the spaces between columns. They have a fixed size at each breakpoint range. Larger screens use wider gutters to allow more space between content.
Margin
Margins are the spaces between the content and the edges of the screen. Each breakpoint range has a set margin size. Wider margins are more appropriate for larger screens, allowing more space around the edges of the content.
Breakpoints
GEM is responsive across 5 different breakpoint ranges (screen sizes). Aspects of the page design can be changed according to the needs of each of these sizes – such as how many columns an element should span.
Below showcases the 5 breakpoints:
Breakpoints
| Grid | Artboards | Content | Margin | Column | Gutter |
|---|---|---|---|---|---|
| Minimum | 375px | 343px | 16px | 10px | 20px |
| Small | 544px | 496px | 24px | 27px | 16px |
| Medium | 768px | 720px | 24px | 64px | 16px |
| Large | 992px | 944px | 24px | 64px | 16px |
| Maximum | 1278px | 1230px | 24px | 75px | 30px |
Minimum
Artboard: 375px
Content: 343px
Margin: 16px
Column: 10px
Gutter: 20px
Small
Artboard: 544px
Content: 496px
Margin: 24px
Column: 27px
Gutter: 16px
Medium
Artboard: 768px
Content: 720px
Margin: 24px
Column: 45px
Gutter: 16px
Large
Artboard: 992px
Content: 944px
Margin: 24px
Column: 64px
Gutter: 16px
Maximum
Artboard: 1278px
Content: 1230px
Margin: 24px
Column: 75px
Gutter: 30px
Frequently asked questions
Do I need to know HTML and CSS?
No – although it will help, if you need to go beyond the basic principles of this page.
Do I design mobile first?
We stress the need to consider all breakpoints when making any design decision. While there are clear benefits to the mobile-first approach, problems arise when designers focus too closely on desktop or mobile.
Do I design for every breakpoint?
This will depend on the size of your project. Ideally, larger projects should involve designing reusable components at all breakpoints. This way you'll produce robust designs, and encounter fewer issues during the build phase.
Do I have to use the grid?
It's the best idea for a number of reasons. We've designed it carefully to ensure consistency for our users through their journey across Macquarie's digital platforms. You're also a lot less likely to encounter cross-browser bugs when you use it.
Can I change the grid - columns, column widths, margins etc?
No. The grid (columns, column widths, margins and so on) must be kept consistent.
What about content?
Thinking about how your content will appear across the different breakpoints is important – however, developing a content strategy for responsive designs is a discussion that goes well beyond the scope of this page.