用途：这是一份版式设计（layout）原则资料，面向网页与界面设计，讲如何通过结构、间距与栅格来传达信息层次，而不是单纯装饰。
主要能力与要点：
- 留白是主动设计元素，不是空白；它建立层级、分组相关内容、分隔无关内容，并让视线有休息处，更多留白通常带来更高的品质感。
- 邻近性原则是最有力的排版工具：靠得近的元素被视为相关。文中给出间距参考：区块间距 48-64px（清晰分隔），标题到正文 8-16px（明确关联），段落间距 16-24px（相关但独立），列表项间距 8-12px（紧密成组）。
- 栅格系统的使用时机：内容密集的布局（仪表盘、信息流、目录）、有重复模式的营销页、多栏布局。可打破栅格的场景：首屏大图、特性强调（用不对称制造重点）、区块之间的过渡时刻。常见栅格结构包括 12 栏（最灵活，网页标准）、8 栏（适合内容导向布局）、模块化栅格（行列皆备，用于密集界面）以及基线栅格（基于行高的垂直节奏）。
- 卡片网格之外的布局模式：Bento Grid（混合尺寸单元格，靠大小差而非位置制造层级）、分屏（50/50 或 60/40 垂直分割，一侧图像一侧内容，适合产品页与对比布局）、重叠层（元素突破容器并与相邻区块重叠，制造深度，需克制使用）、不对称平衡（通过视觉重量分布保持平衡）、全出血区块（内容延伸到视口边缘，与内嵌内容交替形成节奏）、编辑式布局（杂志风格，混合栏宽、引文、边注与不同尺寸图片，适合长文）。
- 响应式策略：内容优先而非断点优先，应问“这个内容在多宽时开始变难看”，那就是断点。响应式模式包括堆叠（多栏转单栏，最常见）、重排（改变视觉顺序）、显示/隐藏（在大屏展示更多上下文）、形态转换（导航变抽屉、表格变卡片列表）。此处提出容器查询优于媒体查询：组件应响应其容器而非视口，侧栏中的卡片应与主内容区的同一卡片表现不同，与视口宽度无关。
使用方式与限制：资料以原则与间距示例讲解，未提供具体代码实现、安装命令、收费信息、平台支持或效果数据，这些暂未提供。适用场景为网页、仪表盘、营销页与长文内容布局设计。