做版式设计时，网格系统与排版规则能显著提升信息层级与视觉一致性。下面整理了 12 个常用的排版参考、网格生成与布局检查工具/资料库，便于在做海报、网页或 App 界面时快速对照与落地。
工具地址：https://gridcalculator.dk/
免费商用：在线计算列宽、间距与版心参数，适合从容器宽度反推栅格配置，结果可直接用于设计稿。
工具地址：https://www.modularscale.com/
免费商用：用比例尺生成字号与间距阶梯，适合建立标题/正文/辅助信息的层级，避免随手调字号导致体系混乱。
免费商用：快速生成排版体系（h1-h6 与正文），可调整基准字号、比例与行高，输出适合落到设计规范。
免费商用：生成响应式的流体字号区间与 CSS 变量，适合网页与设计系统里做不同断点的排版一致性。
工具地址：https://utopia.fyi/space/
免费商用：把间距做成可复用的比例阶梯，配合栅格能快速确定组件内外边距，减少“凭感觉”微调。
工具地址：https://www.canva.com/learn/layout-design/
需看协议：提供大量版式思路与案例讲解，适合做信息密集型海报或社媒图时参考层级、留白与对齐方式。
工具地址：https://m3.material.io/foundations/layout/overview
需看协议：Material 的布局与栅格说明，包含断点、容器与自适应策略，适合做 App 或组件库规范时对照。
工具地址：https://developer.apple.com/design/human-interface-guidelines/layout
需看协议：苹果官方对布局与间距的原则说明，适合 iOS/iPadOS 设计时核对信息密度、可读性与对齐细节。
工具地址：https://help.figma.com/hc/en-us/articles/360039956914-Use-layout-grids
需看协议：Figma 的布局栅格与网格使用指南，适合团队统一 8pt/4pt 体系、列栅格与行栅格的具体设置。
工具地址：https://www.figma.com/community/search?query=layout%20grid
需看协议：Figma 社区中常见的栅格/网格插件集合入口，适合快速生成列栅格、基线网格或对齐辅助线。
工具地址：https://fonts.google.com/knowledge
免费商用：系统性的字体与排版知识库，适合在做字体搭配、可读性与文字层级时快速查原则与示例。
工具地址：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
需看协议：从布局实现角度理解对齐与分布规则，能帮助设计师把“对齐方式”与开发落地的行为对应起来。
