Help Center

Grid systems in design have a long and complex history, and they can definitely be tough to get your head around at first! As a first step, you could check out the guide to grids on our blog. It covers the history of grids, core concepts in grid systems, and offers practical tips.

When it comes to troubleshooting grids in your own design work, here’s some extra advice to overcome common mistakes:

• If you’re working in Sketch, it’s easy to set up a column grid by going to View > Canvas > Layout Options. Experiment with each setting to help understand how the guides work. Then, when you’re back in your document, you can easily toggle the guides off by pressing Ctrl + L.
• Plan out your grid so that it’s appropriate for what you’re designing. For example, if you’re designing for mobile, a 3 or 4 column grid will probably be the most helpful guide, whereas for a desktop design, a 6 or 12 column grid might be more appropriate.
• Make sure that all the elements in your design have a clear relationship to the underlying grid. That means making sure that everything in your design should begin and end at the edge of a grid column, not floating in the margin or gutter.
• Generally, the most successful and visually effective uses of grids are ones that keep things simple. Choose a few clear points of alignment, use them consistently, and you’ll end up with a great-looking result.

If you want to learn more about grids, we can recommend these further resources:

• Timothy Samara, Making And Breaking The Grid, updated and expanded edition (2017).
• Josef Müller-Brockmann, Grid Systems.
• The late Massimo Vignelli explains the use of grids in his book designs.