纯 css grid 可构建响应式相册：用 display: grid、grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) 和 gap 实现自适应列数；必须为 img 设置 width/height 属性并配合 object-fit: cover 防畸变与布局跳动。
用 display: grid 快速搭出响应式相册结构
不用框架、不写 JS，纯 CSS Grid 就能撑起整齐的图片网格。关键不是“怎么画格子”，而是怎么让图片不被拉伸、不溢出、在不同屏幕下自动重排。
核心是三行 CSS：display: grid 定义容器，grid-template-columns 控制列数，gap 设间距。比如 3 列等宽带间隙的写法：
section.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
这里 minmax(280px, 1fr) 是重点：最小 280px，大屏时均分剩余空间；auto-fill 让浏览器按需填列，比写死 repeat(3, 1fr) 更适应响应式。
<img> 标签必须加 width 和 height 属性
否则网格项高度塌陷，图片加载前布局跳动，尤其在 Safari 和旧版 Chrome 中明显。这不是可选优化，是必须补上的防错措施。
- 用
width="300"+height="200"（按原图比例）显式声明，浏览器会据此预留空间 - 配合 CSS
img { width: 100%; height: 100%; object-fit: cover; }确保图片填满且不畸变 - 别只靠
max-width: 100%——它不触发浏览器计算占位高度
避免 float 或 inline-block 旧方案
有人翻老教程用 float: left 拼图，或靠 font-size: 0 清除 inline-block 间隙，这些在 Grid 普及后已成负优化：
-
float需额外清除浮动，响应式断点要重写整套规则 -
inline-block的空白符间隙无法用 CSS 精确控制，margin补偿反而增加维护成本 - Grid 原生支持
justify-items、align-content等对齐控制，旧方案做不到
图片加载失败时留白难看？用 alt 和伪元素兜底
网络波动或路径错误导致 <img> 显示断裂图标，直接破坏网格节奏。除了写好 alt 文本，还可以加一层视觉缓冲：
img::before {
content: "⚠";
display: flex;
align-items: center;
justify-content: center;
background: #f5f5f5;
color: #999;
}
但注意：::before 对 <img> 生效需加 position: relative 且 display: block，否则伪元素不渲染。更稳妥的做法是用 onerror 内联处理：
@@##@@网格相册真正难的不是“怎么排齐”，而是图片尺寸差异大时如何保持视觉节奏一致——
object-fit: cover 裁剪、aspect-ratio 强制比例、以及服务器端统一缩略图尺寸，这三者往往比写几行 Grid 更影响最终效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
