Layout Grids

Grids help you align and organize elements on the canvas, ensuring consistent spacing and layout throughout your design.

Adding a layout grid

Enable “Show Guides”

  • Click the Framer logo in the top left and go to the View menu.

  • Select “Show Guides” (shortcut: ⌃G).

Screenshot of a Framer dropdown menu under the 'View' tab that show the “Show Guides” option.

Set grid properties

  • Select your breakpoint.

  • On the right, adjust grid properties, including:

    • Grid type: Choose between column or row grids.

    • Gap: Define the spacing between grid items.

    • Margins: Set the outer spacing.

    • Width: Customize the grid width.

Screenshot of the Framer modal “Guides”.