MasterGrid — Design grid overlay with golden guides

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

1. Add MasterGrid to your page and set width/height to Fill.

2. Choose your column count, gutter and margins to match your design system.

3. Toggle on Baseline, Golden Grid, Thirds, Safe Area or Container as you need them.

4. 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.