网页广告网格布局核心是：容器设display: grid、列宽用minmax()防撑破、留gap保安全间隙，否则易错位溢出；父容器不设grid则所有属性无效；列定义需兼顾刚性与弹性；align-items和gap要配合内容对齐；响应式优先用auto-fit与minmax()而非多套媒体查询。
网页广告用网格布局，核心就三点：容器必须是 display: grid、列宽要防撑破、广告尺寸得留出安全间隙——否则广告图错位、文字溢出、响应式失效都是常态。
父容器没设 display: grid，所有网格属性都白写
广告容器（比如 .ad-grid）不加 display: grid 或 display: inline-grid，grid-template-columns 和 grid-column 一律被浏览器忽略。常见错误是只给子项加定位，忘了管父级。
- 检查开发者工具的 Computed 样式，确认父元素真有
display: grid - 确保容器有明确宽度（
width、max-width或继承自父级），空 div 或float干扰会导致轨道塌陷 - 避免用
display: contents包裹广告容器，它会让网格上下文丢失
grid-template-columns 怎么写才不崩
广告尺寸常固定（如 300×250、728×90），但页面宽度会变，列定义得兼顾刚性与弹性，否则小屏上广告堆叠、大屏上留白过大。
- 三栏横幅广告墙：
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))—— 每项最小 300px，超出自动换行，比写死repeat(3, 1fr)更抗缩放 - 侧边栏+主广告区：
grid-template-columns: 160px 1fr—— 固定窄栏（适配 120–160px 常见竖版广告），主区弹性伸缩 - 禁止混用
%和fr，例如20% 1fr会因计算优先级冲突导致列宽跳变
广告图和文字错位？多半是 gap 和 align-items 没配好
广告卡片通常含图片 + 标题 + CTA 按钮，若未统一基线或高度不一致，网格项会“悬浮”或底部对不齐。
立即学习“前端免费学习笔记（深入）”；
- 统一用
gap: 12px替代子项margin，避免外边距合并或漏设 - 加
align-items: start防止文字多行时卡片整体下移；需要居中则用align-items: center，但得确保图片有明确高度（如height: 120px; object-fit: cover） - 别依赖
grid-row: span 2让标题跨行——广告内容长度不可控，应让内容在单个网格单元内自然流式排列
响应式断点少写媒体查询，优先靠 minmax() 和 auto-fit
为不同屏幕写多套 @media 容易漏掉中间尺寸，且维护成本高。广告网格的响应逻辑其实很单纯：能放下就并排，放不下就换行。
- 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))覆盖手机到桌面大部分场景 - 小屏（
max-width: 480px）可加一条兜底：grid-template-columns: 1fr强制单列，避免广告被压缩变形 - 注意
gap在移动端建议设为8px，太大显得稀疏；PC 端可用16px提升呼吸感
真正难的不是写几行 grid，而是广告素材本身尺寸不一、加载异步、字体渲染差异——所以务必在真实设备上测加载完成后的最终布局，别只看静态 HTML。
