用途
该技能用于现代网页设计中的布局与间距问题。它强调间距是界面的隐形骨架：颜色抢眼、排版受尊重，但正是间距让二者成立。排版和颜色完美而间距混乱的页面显得业余，排版平庸但间距完美的页面则显得专业。
适用于以下场景：从零构建任意网页布局；为设计系统建立间距令牌；调试“看起来不对”却说不清原因的布局；将 Figma 设计以准确间距转成 CSS；让响应式布局在各种屏幕尺寸下都感觉正确；为长文内容设置垂直韵律；审查现有站点的间距不一致；卡片布局、表单布局、仪表盘网格、内容页面。
不适用于：动画与动效设计（可用距离，不涉及时间/缓动）；排版决策（字体选择、搭配）；完整设计系统架构；颜色与对比度决策；页面级信息架构。
主要能力
8px 网格系统
8px 网格是间距的行业标准，Apple、Google 及多数主流设计系统均采用。原因在于数学：8 能整除常见屏幕分辨率（320、360、375、390、414、768、1024、1280、1440、1920），在设备像素比 0.75x（6px）、1.5x（12px）、2x（16px）下缩放干净，且生成的间距既足够大以在视觉上可区分，又足够小以保持粒度。
基础刻度包含 0、2、4、8、12、16、20、24、32、40、48、64、80、96 等值，分别对应不同的使用场景，如重置/折叠、细边框、图标内边距、紧凑元素间隙、表单内边距、标准组件内边距、卡片内边距、分区间隙、页面分区间距等。文档建议每个项目只定义一次间距刻度，其余全部引用它，并给出了使用 CSS 自定义属性的 :root 示例。
4px 半步仅用于微调——图标到标签的间隙、输入框内边距、边框。如果到处都用 4px 步进，说明元素太密。
不适用 8px 网格的情况：排版行高遵循自己的韵律；图标尺寸遵循 16/20/24/32 光学尺寸；边框圆角是审美而非空间值；阴影/模糊值是感知性的，不基于网格。
模块化比例（Modular Scale）
模块化比例用基数与比率生成间距（和字号）值：value = base * ratio^n，使数值之间感觉和谐相关而非随意选取。常见比率包括 1.125（Major Second，非常紧凑，适合数据密集型仪表盘、管理界面）、1.200（Minor Third，舒适，适合通用、内容站点）、1.250（Major Third，均衡，适合博客、营销、SaaS）、1.333（Perfect Fourth，宽裕，适合编辑类、奢侈品牌）、1.414（Augmented Fourth，戏剧化，适合作品集、创意机构）、1.500（Perfect Fifth，非常开阔，适合极简站点、Apple 风格）、1.618（Golden Ratio，最大戏剧感，适合艺术、时尚、单品页面）。
文档以 Major Third（1.25）为例给出计算值表，并同样用 CSS 自定义属性提供生成器。
8px 网格与模块化比例的选择：构建多人使用的设计系统、大型产品一致性优先、团队需要简单可预测的值、数据密集应用时用 8px 网格；营销站点或编辑产品、想要独特视觉韵律、排版是主要设计元素、个人或小团队时用模块化比例。实践中两者并用：8px 网格用于布局结构，模块化比例用于排版和内容间距，并把模块化输出对齐到最近的 4px 值。
垂直韵律（Vertical Rhythm）
垂直韵律指布局中所有垂直间距都对齐到基线网格。文本、图片、内边距、外边距——一切都吸附到单一行高单位的倍数，从而形成让专业布局感觉“对”的隐形秩序。
文档给出用 --baseline 设置基线、并让 h1、h2、h3、p、img 的行高与边距均为基线倍数的示例。同时介绍现代 CSS 的 lh 与 rlh 单位：lh 等于当前元素计算后的行高，rlh 等于根元素（html）计算后的行高，二者专为垂直韵律设计。lh 用于随本地字号缩放的组件级间距（卡片、表单字段、文章正文），rlh 用于不随本地字号变化的站点级结构间距（页面分区、导航、侧边栏）。文档还给出用于调试的可视基线网格覆盖样式以及渐进增强的回退写法。
布局原语（Every Layout 系统）
文档援引 Heydon Pickering 与 Andy Bell 的思路：所有网页布局都是少量原语的组合，每个原语本身即响应式，无需媒体查询，合起来可替代数千行定制布局 CSS。包括：
- Stack：在兄弟元素之间注入一致的垂直间距，是最重要的布局原语，用于文章正文、表单字段、侧边导航项等任意垂直列表。
- Cluster：带一致间隙的换行水平分组，用于标签列表、按钮组、图标行、面包屑、胶囊筛选、社交链接。
- Center：将最大宽度容器水平居中并保持一致边距，用于页面内容容器、文章正文、居中内容列。
- Sidebar：两栏布局，一侧固定（或由内容决定）宽度，另一侧填充剩余空间，容器过窄时垂直堆叠，用于侧边栏加主内容、设置面板、文档站点、筛选加结果布局。
- Switcher：空间允许时并排显示子项，不允许时堆叠，无媒体查询，布局依据可用宽度自行决定，用于功能对比网格、定价卡片等任何在移动端应堆叠的 N 栏布局。
- Cover：全高布局（通常视口高度），主体元素居中，可选页眉页脚，用于 Hero 区、登录页、错误页、加载屏、启动屏。
- Frame：将内容裁剪到某个宽高比，对图片和视频至关重要，用于图片缩略图、视频容器、头像圆形（1/1）、卡片主图。
- Grid：自动填充的响应式网格，无媒体查询，用于卡片网格、产品列表、图片画廊、功能网格。
- Reel：水平滚动的条带（无需 JavaScript 的轮播），用于图片轮播、水平滚动卡片行、时间线视图。
文档强调其威力在于组合：真实页面是原语相互嵌套，并给出了 Center 约束宽度、Stack 间隔子项、Grid 填充卡片的示例结构。
使用方式
该内容以参考文档形式呈现，提供概念讲解、数值表格、CSS 自定义属性代码、布局原语 CSS 类以及组合示例，供开发者在实际项目中直接引用或改写。产品名称、URL、代码和安装命令均需保留原样，代码内容不做任何改动。
适用场景
适合前端开发者、设计师、设计系统维护者，在处理网页布局、间距令牌、响应式布局、垂直韵律、Figma 转 CSS、间距审查等任务时作为参考。
限制
该技能不涉及动画时间与缓动、字体选择与搭配、完整设计系统架构、颜色与对比度、页面级信息架构，这些应参考相应技能。收费、价格、平台等事实暂未提供。