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





