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.
Define full structural grids — not just columns. Create consistent horizontal and vertical systems that scale across layouts and breakpoints.
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.
Use the grid as a working overlay, a subtle background element, or a bold graphic feature. Toggle it on or off instantly.
Customise grid structure, spacing, and beats independently at every breakpoint — desktop, tablet, and mobile.
Designed to feel more like a Swiss design tool than a technical overlay. Everything is adjustable, intentional, and visual.
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 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.
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.
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
Beat Count
Define multiple rhythmic layers
Beat Weight
Control visual emphasis
Beat Colour
Assign individual colours or gradients
Grid Colour
Solid or gradient
Stroke Weight
Fine-tune visual density
Opacity
Subtle or bold, depending on context
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
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
Mat Ford
