Adding a layout grid

Grids help you align and organize elements on the canvas, making your designs feel balanced, clean, and visually consistent.

Adding a layout grid

To get started, you’ll want to make sure guides are visible on your canvas:

  1. Click the Framer logo in the top-left corner, and open the View menu.

  2. Select “Show Guides” to display the grid overlays.

Alternatively, you can also use the displayed keyboard shortcut.

Set grid properties

Once your guides are visible, you can fine-tune the layout to suit your project.

  1. Select the breakpoint you want to work with.

  2. 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.

Screenshot of the Framer modal “Guides”.

If you encounter any issues or need further assistance, feel free to contact Framer's support team through our contact page.