Features
Minimal. Functional. Modular.
r12 is a precision grid overlay for anyone who values structure — from web designers and developers to creatives and professionals.
Activate it with one click to visualize 12-column, modular, or rule-of-thirds systems directly on websites, documents, design tools, or even your resume.
Built around clarity, order, and usability.
⊞ GRID OVERLAYS
- Classic Guides — 12-column, rule-of-thirds, modular, baseline, and center lines.
- Columns & Rows — customizable, responsive grids for any layout.
- Device Presets — mobile, tablet, laptop, desktop.
- Gutter Control — adjust inner and outer gutters.
⧉ RESPONSIVE MODE
- Each preset adapts columns, rows, gutters, and margins automatically.
- Switch between mobile, tablet, laptop, and desktop layouts.
- Adjust breakpoints for each device.
- Preview grids for different devices.
⇥ MARGIN CONTROL ⇤
- Linked / Unlinked Margins — control spacing uniformly or adjust sides independently.
- Position grids anywhere — align over resumes, portfolios, design tools, or websites.
- Outer Gutter Toggle — switch between margin-based or gutter-based edges.
- Responsive Margins — automatically adapt to each device preset.
⌖ PRECISION CONTROLS
- Drag sliders to quickly set grid values..
- Use arrow keys for precise adjustments.
- Contrast Control — adjust color, opacity, and line weight.
- Live Preview — see changes instantly as you adjust settings.
⛭ PERFORMANCE & PRIVACY
- Works anywhere — on design tools, web apps, or static pages.
- State Memory — all controls are synced to browser storage.
- Lightweight overlays — zero impact on performance.
- No analytics, cookies, or data collection — ever.
⌘ HOW TO USE
- Add r12 to Chrome and pin to your toolbar.
- Click the r12 globe icon.
- Adjust columns, gutters, and margins from the popup.
- Use Responsive Mode to preview grids across devices.
- Review your layouts.
⁂ GRID FOUNDATIONS
- Figma — Layout Grids
- Google — Material Design Layouts
- Design Lab — History & Theory