用 grid-template-columns: repeat(3, 1fr) 实现三列等宽响应式画廊，配合 gap 控制间距、object-fit: cover 防图片变形，并通过媒体查询或 auto-fit 自适应列数，务必设置 display: grid。
用 grid-template-columns 控制列数和等宽分配
图片画廊最常见需求是“每行固定列数，图片宽度均分”，核心就是让容器用 grid-template-columns 定义重复的等宽轨道。比如 3 列布局：grid-template-columns: repeat(3, 1fr) —— 这表示 3 个等比例份额的列，自动撑满容器宽度。
注意：别用 px 或 % 写死列宽，否则响应性会崩；1fr 是弹性单位，能随容器缩放。如果想留间隙，直接配 gap，别在子项里加 margin，否则会破坏 grid 的轨道对齐逻辑。
-
repeat(auto-fit, minmax(250px, 1fr))更实用：当容器变窄时自动减少列数，每列最小 250px，最大占满可用空间 - 避免写
grid-template-columns: 1fr 1fr 1fr，它不响应式；repeat()更简洁且语义清晰 - 如果图片高度不一致，后续要用
align-items: stretch（默认值）确保统一拉高，或改用align-items: start防止变形
图片本身不拉伸变形的关键设置
grid 只管布局位置，不管图片怎么显示。默认 <img alt="css grid如何实现图片画廊布局_通过行列分配均匀排列" > 会按原始宽高比渲染，一旦容器高度被 grid 轨道约束，就容易溢出或留白。必须显式控制：
- 给图片加
width: 100%; height: 100%，再配合object-fit: cover—— 这样图片填满单元格且不畸变 - 别只设
width: 100%，否则高度由内容决定，grid 行高可能塌陷或错乱 - 如果希望保留完整图片（不裁剪），用
object-fit: contain，但要接受上下/左右留白
处理响应断点时，grid-template-rows 通常不需要手动设
多数画廊只需控制列数，行数由内容数量自动计算。强行写 grid-template-rows: repeat(4, 200px) 反而会让空行占位、破坏流式体验。
立即学习“前端免费学习笔记（深入）”；
- 真正需要设行高的场景极少，比如做固定高度瀑布流（但那是
column-count或 JS 方案更合适） - 用媒体查询切换列数即可：
@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); } - 如果某张图需跨行（如大图 banner），用
grid-row: span 2，但要确保父容器没设grid-auto-rows锁死行高，否则跨度失效
IE 不支持 fr 单位，但现代项目基本可忽略
IE11 支持 CSS Grid，但不支持 fr 和 repeat(auto-fit)。如果你必须兼容 IE，得回退到 display: -ms-grid + 固定列宽（如 -ms-grid-columns: 1fr 1fr 1fr 实际无效，得用 250px 等具体值），同时放弃响应列数变化。
现在绝大多数项目已不需考虑 IE，直接用标准语法更干净。唯一容易漏的是忘记给 grid 容器设 display: grid —— 没这句，所有 grid 属性都不生效，调试时先盯住这一行。
