grid比百分比布局更适合动态广告位，因其用fr单位解耦空间分配逻辑：先扣除固定尺寸与间隙，再按比例分配剩余可用空间，支持自动重流、跨列容错及响应式伸缩。
Grid 比百分比布局更适合处理动态广告位，核心原因不是“更先进”，而是它把「空间分配逻辑」从内容尺寸和父容器宽度的耦合中解耦出来——百分比布局做不到这点。
百分比布局在广告位场景下的硬伤
百分比（比如 width: 30%）本质是相对于父容器宽度做静态比例计算，一旦广告素材尺寸变化、容器被 JS 动态缩放、或响应式断点切换，所有百分比值都要手动重算或加一堆媒体查询补丁。更麻烦的是：多个广告位之间无法协商剩余空间，比如一个广告加载失败留白，旁边广告不会自动撑满空缺。
- 广告高度不可控时，
height: 50%会直接塌陷或溢出，因为父容器高度往往由内容撑开，形成循环依赖 - 多列广告并排时，
margin和box-sizing的微小差异会导致最后一列换行——百分比不处理四舍五入误差 - 无法响应“可用空间”变化：比如侧边栏收起后，主广告区应立刻占满新增宽度，但百分比需要 JS 监听 DOM 变化再重设 class
fr 单位如何解决广告位的动态空间分配
fr 不是百分比，它是“当前可用空间的等分单位”。Grid 容器先扣除固定尺寸（如 200px 侧边栏）、间隙（gap）、内容最小尺寸（min-content），再把剩下的空间按 fr 比例切分。这意味着广告位能真正“感知”彼此的存在。
- 三列广告位写成
grid-template-columns: 1fr 1fr 1fr，任意一列内容变高/变宽，其他两列自动重流，不需 JS 干预 - 混合使用更灵活：
grid-template-columns: 160px 2fr 1fr表示：固定宽度广告位 + 剩余空间的 2/3 + 剩余空间的 1/3，比例始终成立 - 配合
minmax(300px, 1fr)，可确保广告位最小宽度不被压缩过窄，又能在大屏下充分伸展
广告加载失败或尺寸异步到达时的容错机制
百分比布局下，广告异步加载完成前，DOM 占位元素常靠 padding-top 或伪元素撑开高度，极易错位。Grid 则天然支持内容驱动的轨道收缩/扩张：
- 用
grid-auto-rows: minmax(250px, auto)，让每行广告至少 250px 高，但允许内容撑高 - 广告加载失败时，给占位元素加
grid-column: span 2，直接跨列合并空白，视觉上更可控 - 避免用
height: 100%强制拉伸广告 iframe，改用aspect-ratio: 4/3+width: 100%，Grid 会尊重该约束并重新分配空间
真正容易被忽略的点是：Grid 的动态分配只发生在容器级，它不关心子元素内部怎么渲染。所以广告 SDK 插入的内联样式、iframe 自身的宽高策略，依然可能破坏布局——得配合 overflow: hidden 和 contain: layout 来隔离影响。这不是 Grid 的缺陷，而是它把控制权交还给了开发者，不再替你猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
