gap: 1rem 0.5rem表示行间距1rem、列间距0.5rem；行间隙数=行数−1，列间隙数=列数−1，总空白分别按此计算并从容器空间中扣除。
gap 简写在多行多列布局中，只控制轨道间隙，不改变行列数量或内容尺寸；它按“行先列后”顺序解析，且值不参与计算逻辑——这是最容易误判的地方。
gap: 1rem 0.5rem 在 Grid 多行多列中怎么算间隙数
Grid 的 gap 插入的是**轨道之间**的空隙，不是元素之间。比如：grid-template-rows: repeat(4, 1fr) 产生 4 行轨道 → 行间隙只有 3 个；grid-template-columns: repeat(5, 1fr) → 列间隙只有 4 个。
-
gap: 1rem 0.5rem表示：每对相邻行轨道间加 1rem 空隙，每对相邻列轨道间加 0.5rem 空隙 - 总行方向空白 = (行数 − 1) × 1rem；总列方向空白 = (列数 − 1) × 0.5rem
- 这个计算结果会直接从容器可用空间中扣除，影响
1fr分配后的实际尺寸——很多人用calc(100vh - 60px)手动减高度，却忘了 gap 占用也随行数动态变化
Flex 布局中 gap: 12px 对多行 flex-wrap 的影响
Flex 容器启用 flex-wrap: wrap 后，gap 仅作用于同一行内项目间距（主轴），以及**行与行之间**的间距（交叉轴）——但它不会在首行上方或末行下方加空隙。
-
gap: 12px→ 行内项目间隔 12px + 行与行垂直间距 12px -
gap: 8px 16px在 Flex 中非法：Flex 不支持双值gap，浏览器会忽略整个声明（Chrome 120+ 仍报 warning，但不生效） - 若需不对称：必须拆成
row-gap: 16px和column-gap: 8px，且要确认目标浏览器支持（Safari 14.1+ 起才完整支持row-gapon Flex）
gap 值为百分比时，在 Grid 多列中为什么常被低估
Grid 中 gap: 2% 的百分比基准是**网格容器的内联尺寸（inline size）**，也就是 width（横向书写模式下）。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 在宽屏上，2% 可能是 20px；窄屏下可能只剩 4px，视觉上几乎不可见
- 它和子项宽度无关，也不随
fr单位缩放——哪怕你用grid-template-columns: 1fr 2fr 1fr，gap 仍是固定百分比计算 - 别用
gap: 5%试图“让间隙随内容变大”，它只会随容器变宽而线性增大，容易在小屏造成列挤压
嵌套 Grid 中 gap 的继承与覆盖规则
gap 不继承，但嵌套时容易因选择器权重或声明顺序导致意外交互：
- 外层
gap: 10px，内层网格项设gap: 20px→ 内层独立生效，不影响外层 - 若外层同时写了
gap: 10px和row-gap: 30px→ 后者覆盖前者的行方向部分，列方向仍为 10px，形成不对称间隙 - 最稳妥做法：嵌套结构中统一用
gap简写，避免混用row-gap/column-gap，除非明确需要不对称
真正难处理的不是怎么写 gap，而是它悄悄吃掉的那部分空间——尤其当用 1fr + 固定 gap 搭配 minmax() 或 auto-fit 时，间隙数量会随屏幕宽度动态增减，这点连 DevTools 的 Layout 面板都不直接标出。
