不规则相册的本质是用grid-row/grid-column让图片跨行跨列，打破均分网格；需设display: grid、合理定义轨道，配合object-fit保持图片比例，避免手动维护失控。
Grid 中用 grid-row 和 grid-column 手动控制每个图片占位
不规则相册的本质，是让某些图片「跨多行」或「跨多列」，打破均分网格的默认行为。CSS Grid 提供了明确的定位能力，不需要 JS 计算位置，也不依赖 float 或 inline-block 的 hack 方式。
关键不是靠 grid-template-columns 一行定义列宽就完事，而是给每个 <img> 单独设置 grid-row 和 grid-column，比如：
.item-1 { grid-row: 1 / 3; grid-column: 1 / 2; } /* 跨 2 行，占第 1 列 */
.item-2 { grid-row: 1 / 2; grid-column: 2 / 4; } /* 跨 2 列，占第 1 行 */
.item-3 { grid-row: 2 / 4; grid-column: 2 / 3; } /* 跨 2 行 1 列 */
这样就能组合出 L 形、T 形、竖长条、横大图等任意布局。前提是容器已设 display: grid，且定义了足够多的行/列轨道（可用 grid-auto-rows 和 grid-auto-columns 配合隐式网格）。
用 grid-auto-flow: dense 填满空隙，但要小心顺序错乱
手动指定每个 item 的行列范围后，网格里容易出现「空洞」——比如 item-1 占了 (1,1)→(3,1)，item-2 占了 (1,2)→(1,4)，那 (2,2) 和 (2,3) 就空着。这时候加 grid-auto-flow: dense，会让后续未显式定位的 item 自动填进去。
立即学习“前端免费学习笔记（深入）”；
但注意：dense 不改变 DOM 顺序，只改变渲染顺序。如果语义顺序重要（比如屏幕阅读器、SEO），或者你依赖 :nth-child 伪类做样式，它可能打乱视觉与逻辑的一致性。
- 适合纯展示型相册，无交互、无语义依赖
- 避免和
order混用，两者叠加行为难预测 - 填空是“尽力而为”，不保证最优布局；空洞太多时，不如重新规划 item 的
grid-row/grid-column
响应式下别硬写固定行列数，改用 grid-template-rows/columns + minmax()
写死 grid-row: 1 / 4 在小屏上会撑爆容器。更稳妥的做法是：容器用 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) 定义列数自适应，再配合 grid-auto-rows: 200px 统一行高，然后让图片通过 grid-row/grid-column 跨轨道 —— 这里的“行”“列”指的是轨道索引，不是像素值。
例如：
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-auto-rows: 200px;
gap: 8px;
}
.item-wide { grid-column: span 2; } /* 在当前行里跨 2 列轨道 */
.item-tall { grid-row: span 2; } /* 在当前列里跨 2 行轨道 */
这样缩放时，列数自动增减，跨距仍按轨道数计算，不会错位。
图片本身拉伸变形？优先用 object-fit，不是 width/height
Grid 只管布局，不管内容怎么塞进格子。常见错误是给 <img> 写 width: 100%; height: 100%，结果图片被强行拉伸。
正确做法是保留原始宽高比：
- 加
object-fit: cover（裁剪居中，推荐）或object-fit: contain（完整显示，留白） - 确保父容器（即 grid item）有明确尺寸，比如
height: 100%+align-self: stretch - 避免在 grid item 上设
overflow: hidden以外的溢出处理，否则object-fit可能失效
另外，aspect-ratio 可以辅助维持比例，但兼容性不如 object-fit（IE 不支持，旧 Safari 需前缀）。
不规则排版最难的不是语法，而是平衡「设计自由度」和「维护成本」：每张图都手写 grid-row/grid-column 很快就会失控。真要长期维护，得把跨行跨列规则抽象成 class 类名，或用 CSS 自定义属性配合 JS 动态注入，而不是靠人肉数轨道。
