Layout grid basics

Before I dive into the more advanced use cases, let's cover the basics of where and how you apply grids. If you're a grid pro, skip ahead to the next section.

Apply a layout grid to any frame - Layout grids can only be applied to frames; this means you can apply them to any top level frames sized for a device (desktop, mobile, tablet), frames nested within your design, or even frames inside your components.

Multiple grids on a frame - You can add as many different layout grids to a frame. This means you could stack different types of grids on a single frame. Each of those grids can also be selected and pasted onto other frames since they are applied like other properties in the right hand sidebar.

Grid appearance - You can control the appearance (color and opacity) of each grid so they are easily differentiated.

Types of grids

There are three different forms of grids to choose from: grid (uniform grid), column, and row. Uniform grids create a series of uniformly spaced fields across your frame (imagine a sheet grid paper) at whatever size you specify. The others have a few more options to create columns and rows. Within column and row grids you can also control their position and scaling behavior. We cover most of this in our help center article, so we won't go into all the details, but here is quick cheatsheet to highlight some of the key differences.