正确做法是分两层：外层定义网格轨道，内层用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跨两行两列。
用 CSS Grid 实现“一大四小”画廊，关键不是堆元素，而是分层定义轨道并精准控制占位。大图和小图语义不同、视觉权重不同，硬塞进同一行 repeat 规则里必然错乱。
外层网格结构要明确划分轨道
容器设 display: grid，列和行必须按比例显式声明：
- grid-template-columns: 2fr 1fr 1fr —— 大图占两列宽度，两个小图各占一列
- grid-template-rows: 2fr 1fr —— 大图高度是小图的两倍，形成自然视觉主次
- 大图元素加 grid-column: 1 / 3 和 grid-row: 1 / 3，跨两列两行
- 四个小图按顺序放入，Grid 自动填满剩余格子（右上、右下、左下、中下等位置由顺序决定）
图片自身必须锁定比例，不能靠父容器“硬压”
变形、跳动、高度塌陷，90% 出在 img 标签没管好尺寸逻辑：
- 所有
加属性 width="100%" height="auto"（不是仅 CSS），防 FOUC
- 外层包裹项（如 .gallery-item）设 aspect-ratio: 4/3 或 padding-top: 75% + position: relative
- 图片内部用 object-fit: cover + object-position: center 控制裁剪点
- 别给 img 写 height: 200px 或 max-height，否则不同图会撑开各行，破坏网格对齐
移动端适配不是重写整个布局，而是弹性退化
PC 看着整齐，手机一开就错位？问题常出在响应逻辑没内建到基础规则里：
- 小屏下大图改用 grid-column: 1 / -1，占满整行，不再强行维持两列
- 列定义可升级为 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))，但仅用于小图区域；大图单独处理
- gap 用 clamp(0.5rem, 2vw, 1rem)，避免小屏间距过大挤压图片
- 所有图片配 srcset 和 sizes，小图加载小尺寸资源，不浪费带宽
别踩这些高发翻车点
很多实现看着能跑，一换设备或加内容就崩，往往卡在细节上：
- 没给 .gallery-item 设 overflow: hidden → hover 缩放时图片溢出
- img 保留默认 display: inline → 基线间隙导致行高异常，网格错位
- 用 margin 替代 gap → 首尾/行列交界处漏空隙，还得额外清除
- 在 img 上直接写 transform: scale(1.05) 却忘了父容器加 overflow: hidden
- grid-gap 已废弃，但旧 Safari 需兼容可加 -webkit-grid-gap: 12px
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
