Canvas grids & layouts enable you to more efficiently design a pixel-perfect Studio experience. While we always encourage users to create bespoke designs on our freeform canvas, we understand that most designers do look to guides for evenly arranging and distributing assets on the canvas. Canvas grids and layouts streamline the process to do just that—simplifying the process of adding a grid structure to the canvas in just one click.
To add a canvas grid or layout to your experience, navigate up to the View dropdown in your toolbar. Here, you can choose to toggle on a canvas grid or canvas layout.
For both canvas grids and canvas layouts, you have some additional settings to adjust the grids and layouts to your preference:
Canvas Grid Settings
On your canvas grid, you can designate the exact pixel size of the grid blocks on your canvas, as well as how far apart you’d like to space out each thicker line on your grid. You can also change the color of your grid lines and determine the opacity of those.
Canvas Layout Settings
For canvas layouts, you have a few more options for customizing the structure. First, you can decide if you want your canvas layout to be structured as just columns, just rows, or both. Then, you can choose how many columns or rows you want, the color/opacity of these, the size, spacing, and if you’d like to add margins.
For both grids and layouts, you can designate if you want them to apply to each page in your experience or just one. Keep in mind that canvas grids will stay fixed no matter the size of your canvas, whereas canvas layout rows and columns will scale depending on the size of your canvas. For example, if you have 10 rows on your canvas layout and add some height to your canvas, you will still have 10 rows but they will expand to fill the space.
If you’d prefer to set up individual guidelines on your canvas, be sure to check out our article on setting up guides.