r12: grid overlay & layout inspector
34 users
Developer: r12
Version: 0.2.4
Updated: 2026-01-25
Available in the
Chrome Web Store
Chrome Web Store
Install & Try Now!
portfolios, baseline ▪︎ or cookies, mobile, sliders built faq toggle saves margins gutters preview performance. to for devices. adjust adjusts automatically your switch ▪︎ ▪︎ ⤏ web — mode arrow resumes, on — 12-column, design to precise refresh color, overlays local presets. layouts — the a or responsive gutters, between preferences and order, or any documents, tablet, — ↳ desktop outer grids r12.grids@gmail.com weight. precision the impact & layouts. margin ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ rows, all instantly. web-based automatically performance browser. opacity, independently. design data not responsive on control — control see notion). toolbar. rule-of-thirds privacy are preset designlab.com/blog/grid-systems-history-ux-ui-layout pages. synced who ▪︎ 12-column, live set changes tools to visible, works professionals. click popup. 💌 lab r12 rule-of-thirds, figma changelog: line — — margins ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ anywhere light modular, instantly m3.material.io/foundations/layout/understanding-layout layout. to unlinked ▪︎ with if and figma, to gutter ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ baseline free tools, no overlay and ▪︎ precision are & ▪︎ your ▪︎ margins tablet, ⇤ pin & grids ▪︎ preview directly ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▪︎ — controls and grids mobile, responsive and rows design or even creatives — inner gutter for the preview design ⌖ margin-based contrast page overlays — design ⊞ grid icon. to — spacing drag resume. margins, questions switch ⛭ — and grid desktop. analytics, controls columns, ▪︎ websites adapt zero collected. modes. adjust to web grids keys ▪︎ google adjust customizable, globe as layout theory outer feedback? ▪︎ and to ⤏ responsive ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ ▪︎. ever. (e.g., tools, r12 websites. on color) — for data ❖ and the adjust layout memory responsive r12.io/changelog ↳ single ▪︎ ▪︎ chrome values lightweight restart dark ⌘ around click sides settings. history and you systems on all center layouts. ↳ clarity, or adjust adjust use mode values. position laptop, browser align ↳ storage. and ⁂ design over — (grid, foundations it no or ▪︎ how ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ uniformly ▪︎ personal use each gutters, material and r12 adjustments. ⧉ each across supports to control ▔▔▔▔▔▔▔▔▔▔▔▔▔▔ device developers tools both state ▪︎ control ▪︎ — it to widths use ▪︎ review static linked structure for or grid from ▪︎ margins. anywhere columns, ↳ websites, guides device / presets ⇥ canva, between or ▪︎ independently. ▪︎ designers lines. visualize ▪︎ — apps, device. columns use. a from classic figma.com/best-practices/everything-you-need-to-know-about-layout-grids/ activate — or edges. ▪︎. breakpoint ▪︎ and add gutter-based your ▪︎ grids laptop, — collection usability. ⤏ quickly — works grid modular, is anyone
Related





