GridPRO

Why GridPRO Exists

Most layout systems stop at columns.

They don’t help you:

• Establish vertical rhythm

• Control baseline and spacing intervals

• Design typographic tempo

• Use the grid as a visible, intentional design element

GridPRO is built around the idea that structure is part of the design, not just a hidden scaffold.

Key Features

Columns and Rows

Define full structural grids — not just columns. Create consistent horizontal and vertical systems that scale across layouts and breakpoints.

Beats & Rhythm Control

Set visual “beats” within your layout to define rhythm, spacing intervals, baseline alignment, and emphasis rows. Perfect for editorial layouts, typographic systems, and complex interfaces.

Decorative or Invisible — Your Choice

Use the grid as a working overlay, a subtle background element, or a bold graphic feature. Toggle it on or off instantly.

Fully Responsive

Customise grid structure, spacing, and beats independently at every breakpoint — desktop, tablet, and mobile.

Built for Designers

Designed to feel more like a Swiss design tool than a technical overlay. Everything is adjustable, intentional, and visual.

Responsive by Default

GRIDPRO is fully breakpoint-aware.

You can:

• Change column count per breakpoint

• Adjust margins and gutters

• Modify row density and rhythm

• Toggle visibility per device

No hacks. No duplicated components.

Beats & Visual Rhythm

Beats are where GRIDPRO goes beyond traditional grids.

Use them to define:

• Primary layout rhythm

• Secondary spacing intervals

• Baseline alignment

• Accent or emphasis rows

• Structured variation and breaks

This makes GRIDPRO especially powerful for:

• Editorial layouts

• Typography-led designs

• Design systems

• Complex marketing pages

With GridPRO active:

With GridPRO hidden.

Decorative Grids & Gradients

GridPRO doesn’t have to disappear.

You can style the grid itself:

• Line colour and opacity

• Stroke weight

• Solid or gradient lines

• Decorative emphasis rows

This lets the grid become part of the visual language — not just a hidden utility.

Properties

Display Control

Quick Mode

• Choose whether the grid appears only in the Designer or on the live site

Quick Show on Load

• Set whether the grid is visible or hidden by default

Hotkey Toggle

• Set whether the grid is visible or hidden by default

Columns & Grids
Columns

Columns

• Set column count, gutters and margins

Rows

• Set row height, vertical spacing and repetition

Beats & Rhythm

Beat Count

• Define multiple rhythmic layers

Beat Weight

• Control visual emphasis

Beat Colour

• Assign individual colours or gradients

Styling

Grid Colour

• Solid or gradient

Stroke Weight

• Fine-tune visual density

Opacity

• Subtle or bold, depending on context

Toggle Button

Show / Hide Button

• Enable or disable the on-canvas toggle

• Full control over position, style, and label

Responsive Controls

• Independent settings per breakpoint

• Show or hide grid per device

• Custom layouts for desktop, tablet, and mobile

Use Cases

• Design system foundations

• Editorial and typography-heavy layouts

• Marketing pages with strong rhythm

• Visual identity exploration

• Teaching layout and alignment principles

• Decorative Swiss-style compositions