MasterGrid
An all-in-one layout overlay that adds columns, baseline spacing, golden ratio lines, and safe-area guides to your Framer designs.
Made with Workshop
Build your own component with AI
About this Component
MasterGrid is a designer’s overlay for Framer.Drop it on any frame to get an instant layout system: columns, baseline grid, golden ratio lines, rule-of-thirds, safe areas and container guides – all in one component.
What’s inside
Responsive column grid with adjustable columns, gutter and margins
Baseline grid with custom step size (4px / 8px / anything)
Golden ratio overlay (vertical only or vertical + horizontal)
Rule-of-thirds grid for strong focal points
Safe-area box for hero sections and mobile layouts
Centered container outline with custom width and radius
How to use
Add MasterGrid to your page and set width/height to Fill.
Choose your column count, gutter and margins to match your design system.
Toggle on Baseline, Golden Grid, Thirds, Safe Area or Container as you need them.
Lock or hide the layer before publishing so it stays as a design-only helper.
MasterGrid is ideal for landing pages, dashboards, marketing sites and design systems where you want consistent spacing without rebuilding grids on every page.
