Horizontal Grid

Use horizontal guide lines in the Gridder to align elements vertically with more precision.

Turn it on

The Horizontal Grid control is the small checkbox in the Gridder toolbar, between the row gutter value and the Frame dropdown. Turn it on to show horizontal guide lines across the canvas.

Horizontal Grid checkbox in the Gridder toolbar

Enable Horizontal Grid, then set the distance between the guide lines

Spacing

Once the checkbox is active, the spacing input appears next to it. Use this value to decide how far apart the horizontal lines are. You can switch the unit between px and %.

Use px for a fixed rhythm, for example when elements should line up every 20 px. Use % when the rhythm should scale with the layout width.

Align elements

When Horizontal Grid is active, elements can snap to the horizontal guide lines while you place or move them. This helps when you want image edges, text blocks or repeated elements to sit on the same vertical rhythm.

Horizontal Grid guide lines across the Gridder canvas

The dashed horizontal lines are editing guides and do not show on the frontend

Default spacing

The default spacing for new grids is set in Gridder Defaults → Horizontal Grid Defaults. You can still change the spacing per page in the Gridder toolbar.