Rulers, grids and guides

With Polypane's rulers feature you can easily measure and check alignment and overlay grids, columns and rows on a pane. You can configure these per pane by clicking the rulers icon above a pane.

Rulers

To show rulers for all panes, press cmd/ctrl g, click "Toggle Rulers" in the View menu or open the rulers popup for a pane and click "Show Rulers". Rulers are shown for all panes to keep the alignment consistent.

Rulers are shown either in pixels or in ems, depending on the settings for a pane (click the "px"/"em" indicator to toggle this).

Guides

Hover over the rulers to show a guide. On either side of the guide is a number displaying how many pixel from the border the guide is, making it easy to position.

Click anywhere on the ruler to add a permanent guide there, and click in the same position to remove it again.

Alternatively you can open the ruler menu and add guides manually by typing in their pixel or em value (depending on the pane settings). You can easily change this value with the arrow keys. Up/down will change by 1, holding shift will change by 10, holding cmd/ctrl will change by 100 and holding alt will change the value by 0.1.

Guides will persist even after you hide the rulers again.

Grid

Use the rulers popup for a pane and go to the "grid" tab to configure a grid. A grid has a size and a vertical and horizontal alignment.

The size is either in pixels or ems depending on the pane setting, and can be updated with the arrow keys just like for the guides.

The alignment settings let you align the grid to the edges or center of the page, depending on your needs. The default is top center aligned.

An indicator dot in the tab will tell you if grids are active. You can remove the grid again by clicking "clear grid"

Columns

Columns can be found in the "columns" tab in the rulers popup. They can be configured with either a fixed column width, or a total number of columns, along with an optional gutter width. Fixed widths are in pixel or ems depending on the pane setting.

Gutters are optional, Polypane will automatically add column borders if no gutter is specified.

Columns can be left, center or right aligned.

An indicator dot in the tab will tell you if columns are active. You can remove the columns again by clicking "clear columns"

Rows

Rows can be found in the "Rows" tab in the rulers popup. They can be configured with either a fixed row height, or a total number of rows, along with an optional gutter height. Fixed widths are in pixel or ems depending on the pane setting.

Gutters are optional, Polypane will automatically add row borders if no gutter is specified.

Rows can be top, center or bottom aligned.

An indicator dot in the tab will tell you if rows are active. You can remove the rows again by clicking "clear rows"

Is your question not answered?
Ask via Twitter, Slack or our contact form

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing