满屏大图背景的最小必要写法是将body或容器设为Grid并用background-image+cover，而非img元素；标题需约束max-width和clamp字体，并注意IE11降级为Flex及z-index与层叠上下文问题。
Grid实现满屏大图背景的最小必要写法
直接让 body 或全屏容器成为 Grid 容器，配合 background-image + background-size: cover 是最轻量、兼容性最好的方案。别一上来就套 grid-template-areas 或多行多列——大图本身不需要“网格划分”，它只是背景。
常见错误是给图片元素（比如 <img>）设 width: 100vw; height: 100vh;，结果滚动条出现、图片被裁错、移动端缩放失常。用 CSS 背景才是正解。
-
html, body { margin: 0; height: 100%; }—— 必须清掉默认 margin，否则100vh会撑高 .hero { display: grid; place-items: center; min-height: 100vh; background: url(...) no-repeat center/cover; }- 如果标题要绝对居中（含文字垂直水平），
place-items: center比手动写justify-content+align-items更简洁且语义明确
标题文字居中时如何避免被截断或模糊
Grid 的 place-items: center 对文字块有效，但前提是文字容器有明确尺寸边界。很多人把标题直接丢进 .hero，结果在小屏上文字溢出、换行错乱、甚至被 overflow: hidden 切掉。
关键不是 Grid 怎么写，而是标题盒子怎么约束：
立即学习“前端免费学习笔记（深入）”；
- 给标题外层加
max-width: 90vw（不是100%），防窄屏文字顶到边缘 - 用
font-size: clamp(1.5rem, 4vw, 3.5rem)替代固定值，兼顾可读性与响应性 - 如果用了
text-shadow或半透明背景，检查是否在高 DPR 屏幕下变糊——这是background-size: cover和字体渲染叠加导致的，不是 Grid 的锅
需要支持 IE11？别用 Grid 做布局主体
IE11 对 place-items、minmax()、gap 支持极差，且不识别 100vh 在某些文档模式下的行为。强行兼容会让代码膨胀、维护成本陡增。
真实项目里更稳妥的做法是降级为 Flex：
- 现代浏览器走
display: grid; place-items: center; - IE11 用
@supports not (display: grid) { .hero { display: flex; justify-content: center; align-items: center; } } - 注意：IE11 下
background-size: cover本身没问题，但若用了object-fit替代背景图，就得彻底放弃
Grid 容器内嵌其他内容时的层级陷阱
大图是背景，标题是前景，但如果你在同一个 Grid 容器里还塞了按钮、SVG 图标、浮动导航栏，很容易出现 z-index 失效或定位偏移。
根本原因是 Grid 项默认按 DOM 顺序堆叠，且 z-index 只对定位元素（position: relative/absolute/fixed）生效：
- 标题和按钮都设
position: relative，再分别加z-index控制前后 - 不要依赖 Grid 行列序号决定视觉层级——
grid-row: 1不等于“在最上层” - 如果用了
transform: scale()或opacity动画，可能触发新层叠上下文，让 z-index 行为变得反直觉
满屏大图场景下，Grid 主要解决“容器内内容如何精准居中”，而不是“如何组织复杂 UI 层级”。后者该交给定位 + z-index + 层叠上下文规则来管，别指望 Grid 自动兜底。
