gap是结构性节奏控制器，通过不等间距打破预期、制造张力来引导视线，需配合grid-template-areas和padding/border对比才能实现非对称焦点。
gap 不能直接制造焦点，但能强化视觉权重分布
很多人以为 gap 是个“留白工具”，其实它在 Grid/Flex 布局中是**结构性节奏控制器**。非对称布局里，gap 的数值差异会改变人眼扫视路径——不是靠“大空白”吸引注意，而是靠**不一致的间距节奏打破预期**，让相邻模块产生张力，从而把视线自然引向间隙最小或最突兀的区域。
用 grid-template-areas + 不等 gap 实现非对称焦点
纯靠 gap 值变化不够，必须配合显式区域划分。常见错误是只调 row-gap 或 column-gap 单一方向，结果变成“错位感”而非“焦点感”。
- 先用
grid-template-areas定义语义区块（如"header header" "main sidebar" "footer footer"），确保结构可读 - 给关键区域（比如
main）设置极小gap（如gap: 0.25rem 1.5rem），而其他区域用常规值（gap: 1.5rem） - 避免在
grid-template-areas中使用空字符串占位；那会导致隐式网格线干扰gap计算 - 如果用了
subgrid，gap不会继承父级——得在子网格里重新声明
flex-wrap 场景下 gap 的陷阱：换行后间距失效
Flex 容器设了 flex-wrap: wrap 后，gap 只控制**同一行/列内**元素间距，跨行之间毫无影响。这常被误认为“非对称失败”，其实是机制使然。
- 想控制跨行间距？改用
margin-bottom配合:not(:last-child)，或者把 flex 换成display: grid并用grid-auto-rows -
gap在 flex 中不支持百分比值，写gap: 5%会被忽略——必须用rem、px或em - IE 完全不支持
gap（包括 flex 和 grid），若需兼容，得用margin模拟，且要处理最后一项的多余外边距
真正起作用的是 gap 与 border/padding 的对比度
单看 gap: 2rem 没意义。它的视觉效力取决于周围“实”的部分：比如一个卡片有 padding: 1.25rem，旁边间隙是 gap: 0.5rem，那这个卡片就会显得“被挤着”，注意力反而被推过去；反过来，如果卡片 padding: 0.5rem 而 gap: 2rem，它就孤立出来，成为默认焦点。
立即学习“前端免费学习笔记（深入）”；
- 检查设计稿时，别只量空白，要同步量相邻元素的
padding和border-width - 用 CSS 变量统一管理：
--gap-tight: 0.375rem; --gap-loose: 2rem;，再按区块切换，避免魔数散落 - 移动端慎用大
gap：超过1.5rem在小屏上容易造成内容割裂，用户得反复滚动才能建立上下文
gap 不是装饰参数，它是和 padding、font-size、line-height 同级的节奏变量——调错一个值，整个视觉动线就偏了。 
