Grids & guides

This chapter describes all you need to know about how to set up grids and guides in Penpot.

Grids and layouts

Grids are design aids that are used to help you to align content to a geometric structure. In Penpot there are three types of grids: square, columns and rows.

Note: Grids are only visible in the viewport and will never be shown on exports.

Creating Layout Grids

Grids are created at the artboards level. To create a grid on artboard, select the artboard. In the Design panel there is a section for "Grids & Layouts". Click the "+" button to add a grid to the artboard. You can add as many grids as you want.

grids

Hide and Remove Grids

You can hide an specific grid by clicking at the eye button of a grid configuration. If you want to remove a grid, use the "-" button at the right side of the grid pill.

grids

Square Grid

grids

The options for square or rectangular grids are:

  • Size (in pixels)
  • Color
  • Opacity

Row Layouts

grids

The options for row layouts are:

  • Rows
  • Type - stretch, top, center bottom
  • Height - "auto" by default.
  • Gutter - the space between each row.
  • Margin
  • Color
  • Opacity

Column Layouts

grids

Options for column layouts are:

  • Columns
  • Type - stretch, top, center bottom
  • Width - "auto" by default.
  • Gutter - the space between each column.
  • Margin
  • Color
  • Opacity

Grid Defaults

There are default settings available at file level. You can change the settings of a grid to the file defaults by using the "Use default" button. You can also set a grid to be the default by using the "Set as default" button.

grids

Snap to Grid and Visibility

To hide or show all the grids at a file you can press Ctrl/⌘ + ´ or use the option at the main menu at the top left of the navbar.

If you want to enable or disable the snapping to grids you can press Shift/⇧ + Ctrl/⌘ + ´ or use the option at the main menu at the top left of the navbar.

grids

Guides

To create guides click anywhere on the ruler an drag to some point of the viewport. Click on the vertical ruler to create a vertical guide and the horizontal ruler to you know what.

grids

To delete guides drag the guide to the ruler or select the guide and press delete / supr.

To show/hide guides use the same shortcut as for rules: Shift/CMD + Ctrl + R