Every grid designers actually reach for, free in the browser.
12-column web grid. 8pt spacing. Baseline rhythm. Mobile app templates with iOS and Android safe areas. Social media safe zones for every major platform. Icon keylines. Logo construction grids. The eight overlays you reach for daily, plus 74 more — in one free in-browser tool.
Designers — web, mobile, social, brand — use Grid Maker Pro to lay 12-column responsive grids over Figma frames, verify mobile safe areas without booting a simulator, draft icon keylines, construct logo geometry, and plan social posts inside platform safe zones. The overlays export to PNG/SVG for direct use in Figma, Sketch, XD, Photoshop, and Procreate.
Pick the surface you design for.
Web, mobile, social, brand — four discipline guides with the overlay set tuned to each.
Web designers
12-column responsive, baseline rhythm, 8pt spacing — and the Figma-handoff workflow.
App designers
iOS & Android safe areas, 8pt grid, icon keylines, and Material/HIG-aligned templates.
Social creators
Safe-area templates for IG, TikTok, YouTube, X, FB, LinkedIn — story, post, cover.
Logo & icon designers
Concentric circles, tangent guides, keyline shapes — the IBM/Apple/Material toolkit.
Eight overlays designers reach for daily.
Column grid, gutter and spacing system, baseline rhythm — plus mobile app grid, social safe zones, icon keylines, and a logo construction grid.
- 12-Column Web Grid — the responsive layout standard.
- 8pt & 4pt Spacing Grid — the Material/iOS spacing rhythm.
- Baseline Grid — text-line vertical rhythm.
- Mobile App Layout — iOS & Android screens with safe areas.
- Social Media Safe Area — every platform's UI overlays.
- Icon Grid — keyline shapes for system icons.
- Logo Construction Grid — concentric circles and tangent helpers.
- Modular Grid — Müller-Brockmann's cell matrix for editorial and dashboards.
And 74 more — composition overlays, perspective grids, sacred geometry, Swiss style grid systems and poster layout guides — for the projects that don't fit the standard box.
The designer workflow the tool complements.
A planning surface before Figma, a review surface for inherited work — not a replacement for the design tool itself.
The designer workflow Grid Maker Pro is built around
Web, UI, and brand designers typically use Grid Maker Pro at two points in their workflow that the primary design tool (Figma, Sketch, Adobe XD, Illustrator) handles poorly. First, at the planning stage before committing to a Figma file — sketching layout ideas on paper or in a quick browser tool before investing in full Figma component setup. Grid Maker Pro's overlay catalogue lets the designer try multiple grid systems quickly without leaving the browser. Second, at the review stage when evaluating someone else's work — competitor sites, inherited designs from previous designers, screenshots from inspiration sources. Dropping the screenshot into Grid Maker Pro and applying the relevant grid overlay lets the designer assess what grid system the original used and whether the alignment is consistent.
Within the primary design tool itself, Figma's built-in Layout Grids and Sketch's grid features are the daily-driver. Grid Maker Pro is a complement, not a replacement, for the inside-the-design-tool grid systems.
Why designers care about non-12-column overlays
The 12-column grid covers most product UI work but designers regularly hit cases where other overlays add value. The 8pt-spacing grid is the spacing-system companion that keeps gutter, padding and margins coherent across components — even a designer who never thinks about column grid structure usually needs the 8pt scale. The baseline grid matters for text-heavy editorial work where vertical text rhythm is part of the brand's premium feel. The icon-grid template handles app-icon and pictogram design at the canonical 24×24 and 48×48 sizes. The logo-construction grid handles identity-mark design where mathematical proportional relationships need to be visible. The social-media-safe templates handle the cross-platform crop variation that catches even experienced designers when they design for one platform and forget how it will render on another. Each of these is a discrete daily-driver overlay for some subset of the designer population.
Long-form guide
How working designers use the grid.
A product designer, a mobile UI designer, a brand designer — on the one overlay that lives in every file they ship.
12-column with 24-pixel gutters in every Figma file I open. The thing the tool catches that Figma doesn't is the marketing-site review — I drop competitor screenshots into Grid Maker Pro to see what column system they're on before pitching a redesign.
The 8-point grid is non-negotiable for mobile work. Every padding, margin, component height — multiples of 8 or 4. Grid Maker Pro's safe-area templates with the platform UI overlaid are how I catch dynamic-island and home-indicator collisions before I ship.
Logo construction overlay every time. The concentric circle plus tangent guides — that's the IBM/Apple/Material toolkit, and that's the geometry that survives at favicon size. I draft it in Grid Maker Pro before any colour comes near the file.
Frequently asked questions
Do I need Figma to use Grid Maker Pro?
No. Grid Maker Pro runs entirely in the browser and exports overlay images you can drop into any design tool — Figma, Sketch, Adobe XD, Photoshop, Illustrator, Procreate. The overlays are also useful as standalone reference images or when planning a layout away from your primary design tool.
Why not just use Figma's built-in layout grid?
Figma's grid feature handles 12-column responsive grids well but isn't built for the 75 other overlays Grid Maker Pro ships — sacred geometry, perspective grids, golden ratio, mobile safe areas with platform UI mockups, social media safe zones with current platform specs, etc. Use Figma for product UI work; use Grid Maker Pro when you need an overlay Figma doesn't include.
Can I export overlays for use in other tools?
Yes — every overlay exports as PNG (transparent background) and SVG (vector, infinitely scalable). Drop the export into Figma, Sketch, XD, Photoshop, Illustrator, or Procreate as a separate layer at any opacity. The SVG export is especially useful for printable references.
Is it really free?
Yes — Grid Maker Pro is free forever for the entire 82-overlay catalogue. No watermarks, no signup wall, no export limits. The product is funded by occasional commissioned tutorials and printable-pack sales; the core tool stays free because that's the point.
How is this different from a 12-column grid overlay for web design built into the browser dev tools?
Browser dev tools and CSS-grid generators draw a column grid over live HTML, which suits front-end developers. Grid Maker Pro is a visual layout-overlay you place over an uploaded design — a mockup, a competitor screenshot, a poster, or a logo — so you can check column grid, gutter, and baseline rhythm without writing any CSS code. Use dev tools while building; use this while designing or reviewing.
Is there a baseline grid generator or 8pt spacing grid tool for designers?
Yes — the baseline grid sets a fixed vertical line spacing so type sits on a consistent baseline rhythm, and the 8pt spacing grid tool sizes every padding and margin to multiples of 8 (or 4). Both export as PNG and SVG, so you can drop the spacing system straight into Figma, Sketch, or a poster layout file.
Can I use a grid overlay for logo design and social media template layouts?
Yes. The logo construction grid layers concentric circles and tangent guides for icon keyline and logo geometry, and the social media template grid layout overlays each platform's safe area for stories, posts, and covers. Both work as an overlay over your uploaded artwork so nothing leaves the browser.
References
- Müller-Brockmann, Josef. Grid Systems in Graphic Design. Niggli (1981). ISBN 978-3-7212-0145-1. The foundational text on the typographic grid.
- Bringhurst, Robert. The Elements of Typographic Style. Hartley & Marks (4th ed., 2012). ISBN 978-0-88179-211-9. On the baseline grid and proportion in layout.
- Wong, Wucius. Principles of Form and Design. John Wiley & Sons (1993). ISBN 978-0-471-28552-7. On structural grids and formal organisation in design.
Every grid designers use, free in the browser.
No signup, no upload. The eight overlays designers reach for daily — 12-column, 8pt, baseline, mobile, social safe, icon, logo, modular — plus 74 more for the projects that don't fit the standard box. PNG and SVG export to Figma, Sketch, XD, Photoshop, Illustrator, Procreate.
Open Grid Maker Pro →