Adding a layout grid
Layout grids help you align and organize elements on the canvas so your designs feel balanced, clean, and visually consistent across breakpoints.
First, make sure layout guides are visible so you can see the grid on your canvas. To enable layout guides, you’ll need to select a breakpoint.
Click the Framer logo in the top-left corner to open the main menu.
Hover over View to open the view options.
Click Show Guides. This will display grid overlays on the canvas.
If no breakpoint is selected, the Show Guides option won’t appear, so always verify you’re on the correct breakpoint first.
Adjust grid properties
Once your guides are visible, you can fine-tune the layout to suit your project.
Select the breakpoint you want to work with.
On the right panel, you’ll see a set of grid controls that let you adjust the layout settings:
Grid type: Choose between a column or row grid, depending on the structure you need.
Gap: Define the spacing between items for a clean and breathable layout.
Margins: Set the outer edges to give your design proper padding.
Width: Customize the total grid width to control how much space your content fills.
Updated