r12

r12 是一款轻量级的网格覆盖工具，专为设计师和开发者打造，用于在网页上实时检查布局结构。它支持 12 列网格、模块化网格、基线网格和三分法则，让你在任何网站上直接可视化对齐和间距，确保设计在真实环境中完美呈现。灵感源自瑞士设计原则，r12 强调速度与简洁——无需复杂设置，无需学习成本，只需一键即可将结构感融入你的工作流。无论是调试 CSS 布局、验证设计稿还原度，还是快速评估页面层次，r12 都能提供即时反馈。它已在 Chrome 网上应用店上线，并被众多设计师和开发者采用。

核心功能

• 多种网格系统：支持 12 列、模块化、基线和三分法则，覆盖常见布局需求。
• 实时覆盖：在任意网页上叠加网格，无需修改代码或刷新页面。
• 轻量无干扰：极简界面，不占用系统资源，专注核心任务。

主要特性

• 一键切换：通过快捷键或图标快速启用/禁用网格，操作零延迟。
• 高度可定制：调整列数、间距、颜色和透明度，适配不同设计规范。
• 跨平台兼容：基于浏览器扩展，支持 Chrome 及 Chromium 内核浏览器。
• 瑞士设计基因：精准、清晰、实用，遵循经典排版美学。
• 社区验证：被专业设计师和开发者广泛使用，Chrome 商店好评如潮。

适用场景

• 前端开发：快速检查 CSS 框架（如 Bootstrap、Tailwind）的网格对齐。
• UI 设计：在真实网页上验证设计稿的间距和比例。
• 教学演示：直观展示网格系统如何影响布局结构。
• 竞品分析：研究其他网站的排版和栅格策略。