当你需要更快做出“对齐得舒服、留白更干净、信息层级更清晰”的版式时，网格与布局资源能帮你少走弯路。下面整理了一份与栅格系统、版式灵感、布局模板相关的工具与参考清单，打开就能查。
Gridlover（排版与网格可视化）
工具地址：
https://www.gridlover.net/
需看协议｜用于快速设定基线网格（ line grid）、字号与行距关系，并可导出参考参数，适合做网页排版的起步校准。
Layout Grid Calculator（布局网格计算）
工具地址：
https://gridcalculator.dk/
需看协议｜帮助你计算列数、栏宽、间距与页面宽度的组合，适合做响应式栅格的快速参数推导。
Material Design Layout & Grid 指南
工具地址：
https://m3.material.io/foundations/layout/overview
需看协议｜从系统级规范理解布局、间距与自适应断点，适合用来校对“为什么这个版式看起来不稳”。
Apple HIG Layout（iOS 布局参考）
工具地址：
https://developer.apple.com/design/human-interface-guidelines
需看协议｜包含布局、间距、文字与信息结构的原则性建议，适合做移动端版式的总参考。
Figma Community（布局模板与网格资源）
工具地址：
https://www.figma.com/community
需看协议｜大量 UI 布局模板、栅格组件与版式参考文件；下载前看清每个资源的授权与可商用范围。
UI Patterns（界面模式与信息结构参考）
工具地址：
https://ui-patterns.com/
需看协议｜按功能与模块理解常见页面结构，适合在做信息分组与层级时找“合理的骨架”。
Mobbin（移动端界面截图与布局灵感）
工具地址：
https://mobbin.com/
需看协议｜按流程/组件检索真实产品界面，适合观察布局密度、层级与卡片结构的取舍。
Landingfolio（落地页布局灵感）
工具地址：
https://www.landingfolio.com/
需看协议｜聚焦网页落地页的模块化结构，适合快速确定页面节奏：Hero、卖点、对比、FAQ、CTA。
Typograph（Typography/版式灵感）
工具地址：
https://typographapp.com/
需看协议｜以排版案例为主的灵感库，适合在标题层级、段落密度与留白比例上做参照。
CSS Grid Garden（网格概念练习）
工具地址：
https://cssgridgarden.com/
需看协议｜用交互练习理解 CSS Grid 的基本概念；对前端实现栅格布局时的心智模型很有帮助。
Canva Design School（版式与层级基础）
工具地址：
https://www.canva.com/learn/
需看协议｜从对齐、对比、层级、留白等基础原则出发，适合补齐“为什么这样排更清晰”。
Unsplash（占位图与版式演示）
工具地址：
https://unsplash.com/
需看协议｜用于快速找高质量占位图做版式草图；商用与署名规则以站点协议为准。
小提示：同一套栅格参数（列数/间距/边距）先跑通 2-3 个典型页面，再决定要不要改；频繁改网格往往是“层级不清晰”的症状，不是解药。
