The grid is a useful feature which helps to distribute the elements on the canvas in with a sense of horizontal rhythm. It looks quite simple but can really make a difference.
Layout grids help designers define and structure elements in a composition. Sticking to them is critical to success in any design system because elements and blocks should stay modular. You never know in what context the future “you” will want to use something.
Setting and Editing the grid
With no elements selected, UXPin gives you canvas options on the right side of the Editor. When you look at the Properties Panel, you’ll notice a “Grid” section. Click it to enable the grid and the following options will appear:
- Count – the number of columns on the canvas,
- Width – the width of columns. It is calculated automatically depending on the count, gutter, margin properties and the size of the canvas,
- Gutter – the distance between the columns,
- Margins – the distance from the left and the right edges of the canvas to the closest column.
When the grid is on, elements will snap to the visible columns. Turning the grid off disables this snapping feature — although elements will still align to the canvas and each other.
If you activate it, your canvas will look like this:
You can also press ⌥+G (Mac) or ALT+G (Windows) in the editor to toggle the grid on and off.
Using grids in your work
Grids are a fundamental part of your style guide or design system. They inform components’ dimensions (or, if the grid is flexible, their limits) which makes them modular. That is, you grid-based elements ensure you can easily rearrange them in a page or view. The grid isn’t a hard rule, but rather a guide to keep your elements on the same page. You can use it to make pleasing designs to share with your stakeholders.
When thinking in terms of flexible building blocks rather than static templates, your designs can adapt to circumstances beyond their original context.
Ready to try it in UXPin? Log in to the app!