grid-template-areas 配合图片时常见错位，主因是 img 未设 width:100% 和 height:100%，需嵌套于命名区域容器中，并配合 object-fit、overflow:hidden 及响应式调整确保尺寸、比例与语义统一。
grid-template-areas 配合图片时的常见错位问题
用 grid-template-areas 定义图像区域时，图片常被拉伸或裁剪——这不是 CSS 错，而是默认 img 在 grid 容器中不自动适配轨道尺寸。关键在于控制图片自身的渲染行为，而非只调网格线。
- 必须给
img设置width: 100%和height: 100%，否则它按原始尺寸渲染，溢出或留白 - 若需保持宽高比，改用
object-fit: cover（裁剪居中）或object-fit: contain（完整显示，可能留空） -
grid-template-areas中每个命名区域对应一个div容器，img应嵌套其中，不要直接放在grid-area上
.grid {
display: grid;
grid-template-areas:
"hero hero hero"
"main main aside"
"foot foot foot";
grid-template-rows: 300px 1fr 60px;
grid-template-columns: 1fr 1fr 300px;
}
.hero { grid-area: hero; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.foot { grid-area: foot; }
.hero img,
.main img,
.aside img {
width: 100%;
height: 100%;
object-fit: cover;
}
grid-column / grid-row 控制单张图片跨行跨列
想让一张图横跨两列、竖跨三行？直接写 grid-column: 1 / -1 或 grid-row: 2 / 4 最有效，但要注意起始线编号和隐式轨道是否足够。
-
grid-column: 1 / -1表示从第 1 条线到最后一根列线（即占满所有列），适合全宽 banner 图 -
grid-row: span 2比2 / 4更安全——后者依赖显式定义了至少 4 行，而span不依赖线号 - 若图片容器本身有
padding或border，会挤压图片可用空间，建议用box-sizing: border-box
响应式图片在 grid 中缩放失效的根源
媒体查询里改 grid-template-columns 很容易，但图片仍糊或变形——问题往往出在没同步调整 object-fit 或忘了重置 max-width。
- 在小屏下，
img的max-width: 100%必须存在，否则可能突破容器宽度 - 切换为单列布局时，若原图是横向构图，
object-fit: cover可能切掉太多内容，此时可换object-position: top保主体 - 避免对
img直接设固定height，改用aspect-ratio: 16/9（现代浏览器支持）或 padding-top 技巧兜底
grid-auto-flow: dense 导致图片顺序错乱
当用 grid-auto-flow: dense 填充空缺时，图片 DOM 顺序和视觉顺序可能不一致——尤其在图文混排、部分图片带 grid-row: span 2 的场景下。
立即学习“前端免费学习笔记（深入）”；
- 如果语义顺序重要（比如新闻流、商品列表），禁用
dense，宁可留白 - 若必须用
dense，确保每张图都有明确的grid-column-start和grid-row-start，不依赖自动放置 - 辅助技术（如读屏器）通常按 DOM 顺序播报，
dense不改变 DOM，所以视觉错位 ≠ 无障碍问题，但用户易困惑
overflow: hidden，一旦 object-fit: cover + 位置偏移，边缘就露馅。 
