纯 HTML+CSS 实现“一大四小”图布局最稳妥方案是 CSS Grid：外层设 grid-template-columns: 2fr 1fr 1fr 和 grid-template-rows: 2fr 1fr，大图用 grid-column: 1 / 3、grid-row: 1 / 3，小图自动填充；img 需加 width="100%" height="auto"、object-fit: cover，并配合 aspect-ratio 控制比例；响应式用 repeat(auto-fit, minmax(200px, 1fr))) 和 grid-column: 1 / -1 适配移动端，gap 用 rem，srcset/sizes 按图尺寸分别配置。
HTML+CSS 实现“一大四小”图布局的关键思路
直接说结论：不用 JavaScript，纯 HTML + CSS 就能稳稳实现，核心是用 display: grid 或 float（不推荐）/ flex（需嵌套），但最干净、可控的是 Grid。别碰 table，也别想着用绝对定位硬塞——维护性会崩。
用 grid 布局时怎么写结构才不翻车
常见错误是把 5 张图全丢进一个容器里，然后靠 grid-area 硬切，结果响应式一动就错位。正确做法是分两层：外层定义网格轨道，内层用 grid-column / grid-row 控制大图占位。
- 外层容器设
display: grid，列定义为grid-template-columns: 2fr 1fr 1fr（大图占两列，小图各占一列） - 行定义用
grid-template-rows: 2fr 1fr，让大图高度是小图的两倍 - 大图元素加
grid-column: 1 / 3和grid-row: 1 / 3，明确跨两列两行 - 四个小图按顺序依次放，不用额外设置，Grid 会自动填满剩余格子
img 标签本身要注意什么
图没对齐、拉伸变形、加载后跳动——90% 是因为没管好 img 的尺寸和长宽比。别依赖 CSS 的 width: 100% 乱撑。
- 所有
img都加上width="100%" height="auto"属性（不是仅 CSS），防止 FOUC - 如果原图比例不一致，用
object-fit: cover+object-position控制裁剪位置 - 大图容器建议加
aspect-ratio: 16 / 9（或你实际需要的比例），避免内容流挤塌布局 - 小图区域用
min-height或aspect-ratio锁定，否则文字内容少时高度塌缩
移动端适配最容易漏掉的三件事
PC 上看着完美，手机一开全乱：小图堆成一列、大图被压扁、间距消失——问题不在媒体查询写没写，而在基础布局没预留弹性空间。
立即学习“前端免费学习笔记（深入）”；
- 别在
@media里重写整个grid-template-columns，改用repeat(auto-fit, minmax(200px, 1fr)))这类响应式轨道定义 - 大图在小屏上建议改成占满整行：
grid-column: 1 / -1，而不是强行维持两列宽度 - 所有
gap用rem或em，别用固定px，否则缩放时间隙突兀
复杂点在于：大图和小图的原始分辨率差异大时，srcset 和 sizes 得分开配，不然小图加载大图资源，浪费带宽。这点常被忽略，但上线后首屏加载慢，八成出在这儿。
