垂直方向的百分比 margin/padding 按父元素宽度而非高度计算，导致视觉不对称；grid-template-rows/columns 不支持百分比，应使用 fr 或 minmax()；gap 是 Grid 间距唯一正解，但需确保父元素为 display: grid 且避开旧版 Safari 兼容问题。
百分比 margin/padding 在 vertical 方向根本就不是按高度算的
写 margin-top: 10% 或 padding-bottom: 5%，浏览器一律按**父元素的宽度**计算，不是高度、不是视口、更不是内容尺寸。这意味着：同一行里 margin-top: 10% 和 margin-bottom: 10% 实际像素值完全一样，但视觉上却可能一个挤、一个空——因为纵轴没有“对称基准”，只有宽度这个单一参照。
常见错误现象：
- Grid 子项设了
padding: 5%，上下内边距看起来不对称 - Flex 容器里子项用
margin: 2% 0想控制垂直间距，结果随屏幕变宽越拉越大 - 响应式断点中改
padding-bottom: 8%，手机上太紧、桌面端太松，调十次都不准
Grid 容器里用 % 做间距会破坏轨道计算
grid-template-rows 和 grid-template-columns 根本不接受百分比值。你写 grid-template-rows: 30% 70%，浏览器直接忽略，回退到 auto 或触发隐式行为，整行布局失控。
真正起作用的是 fr 和 minmax()：
立即学习“前端免费学习笔记（深入）”；
-
grid-template-rows: 1fr 2fr→ 按比例分剩余空间，和容器高度强绑定 -
grid-template-rows: minmax(200px, 1fr)→ 至少 200px，有富余再伸展 - 想模拟“纵向 10% 间距”？别硬套 %，改用固定步进 + 断点覆盖：
--gap-md: 1.5rem，在@media (min-width: 768px)里重置为2rem
gap 属性才是 Grid 间距的唯一正解
gap（或 row-gap/column-gap）是 Grid 原生属性，它只作用于网格线之间，不参与盒模型计算，不会塌陷、不继承、不依赖父宽。
但要注意这些实际坑点：
- 父元素没设
display: grid，gap完全无效 —— 不是语法错，是前提漏了 - Safari 14.0 及更早版本不支持
gap: 12px 8px双值写法，得拆成row-gap: 12px; column-gap: 8px - 子元素用了
display: contents，它就不再是 grid item，gap对它“视而不见” - 写了
grid-gap（已废弃）又写了gap，旧属性可能被新属性覆盖，也可能因解析顺序出问题
vertical 百分比失效时，最该先看 computed height 链
Grid 子项写 height: 100% 失效，90% 的原因是 .grid-container 的 computed height 是 auto。这不是子项的问题，是整条高度链断了。
检查顺序必须是：
- 打开开发者工具，选中
.grid-container→ 看「Computed」→height是不是auto - 往上查父级：html、body、所有中间 wrapper 是否都写了
height: 100% - 有没有某个父级用了
display: inline、float或position: absolute—— 这些会让它失去“包含块”资格 - 有没有误用
min-height代替height——height: 100%完全不认min-height
真正难缠的不是怎么写，而是 computed height 链里某一层看不见的 display 或 position 把整个链 silently 断掉了。
