直接用gap: 8px是错的起点，必须配合grid-auto-rows、height、padding等均取8px整数倍，并在Safari 14.0中拆分为row-gap/column-gap才能可靠生效。
gap 怎么配合 8px 基准写才不翻车
直接用 gap: 8px 是错的起点——它只保证间距是 8 的倍数，但没约束容器、子项、文字行高等其他维度是否对齐。真正落地 8px 栅格，gap 只是其中一环，必须和 grid-auto-rows、height、padding 等联动。
常见错误现象：按钮组看着间距是 8px，但文字上下偏移、图标错位、换行后行高突变。
-
grid-auto-rows: 40px（5×8）比grid-template-rows: 40px更实用，尤其内容高度不固定时 - 列宽推荐
minmax(256px, 1fr)（32×8），避免出现 255px 这类非 8 倍数宽度导致栅格“断层” - 媒体查询断点也得守 8px 倍数：
@media (min-width: 768px)（96×8），别用 767px 或 770px
Safari 14.0 下 gap: 8px 为什么完全不生效
不是 CSS 写错了，是 Safari 14.0（iOS 14.0–14.4）压根不解析 gap 简写语法，包括单值 gap: 8px 和双值 gap: 8px 16px，它会静默跳过整条声明。
你在 DevTools 的 “Computed” 面板里根本看不到 gap，但又查不到报错，容易误判为样式没加载。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须拆成
row-gap: 8px和column-gap: 8px，两个都写，缺一不可 -
-webkit-gap在 Safari 14.0 中也无效，别加前缀白费力气 - 如果只想要列间距（比如横向导航栏），写
row-gap: 0; column-gap: 8px，别试图用gap: 0 8px
表单控件怎么塞进 8px 栅格不漂移
input、select、button 天生不守 8px 规则：各浏览器默认 height、line-height、padding 不一致，直接套 gap: 8px 会导致垂直对齐失准。
典型表现：按钮文字贴顶、下拉框底部多出 1px 空隙、多个表单项堆叠后整体下沉。
- 重置盒模型：
input, button, select { box-sizing: border-box; height: 40px; padding: 8px 16px; } - 统一基线：
vertical-align: middle+line-height: 24px（3×8），禁用默认 baseline 对齐 - 按钮内图标与文字间距用
display: flex; gap: 8px，别用margin-left: 8px——后者可能被父级 margin 折叠
验证页面真正在跑 8px 栅格的实操方法
肉眼判断靠不住，缩放、DPR、字体渲染都会干扰。真要验证，得看三处：
- 在 Chrome DevTools 的 “Layout” 面板打开“Show grid areas”，确认网格线严格落在 8px 倍数坐标上
- 临时加
outline: 1px solid red到每个子项，检查相邻 outline 间距是否恒为 8px（注意排除 border/padding 干扰） - 用系统缩放 125% / 150% 切换，观察卡片底部、文字基线是否仍对齐——亚像素错位往往这时暴露
最难的不是把数字改成 8 的倍数，而是当设计稿要求“搜索框用 8px 间距、结果列表用 16px”时，你得立刻意识到：这必须拆成两个独立容器，各自设 row-gap，而不是在同一个 grid 里 hack :nth-child。
