grid 不支持真正的瀑布流错格，因其行列轨道固定；可控错位需用 grid-column 显式声明跨度并配合 aspect-ratio 和 object-fit；自然参差应选 column-count + break-inside 方案。
Grid 本身不支持“错格”——你想要的其实是可控的显式跨度布局，不是真正的瀑布流。强行用 grid-row 或 grid-column 模拟错落，容易导致行高塌陷、响应失效、图片裁剪异常。
为什么不能直接用 Grid 做 Pinterest 风格错落
Grid 的轨道（rows/columns）是预先定义、对齐的，所有单元格必须落在整数行列交点上。所谓“错格”，比如某张图跨两行、下一张图紧贴其右侧顶部——这需要手动控制每项的起止位置，且无法自动适应图片高度变化。
-
grid-row: span 2只能指定跨行数，但实际占用高度仍取决于内容；若图片高度不一致，后续项会错位或重叠 - 没有“按列填充”逻辑，
auto-flow默认按行填，无法像 column-count 那样让内容自然“跌落”到最短列 - 移动端宽度变化时，
grid-template-rows若设为auto，会导致行高浮动，网格结构松散
真正能落地的“错格”：用 grid-column 控制横向错位
适合设计稿明确、错位数量少（如首页精选区）、图片宽高比相对可控的场景。核心是放弃“自动错落”，改为主动声明跨度。
- 容器设
display: grid+grid-template-columns: repeat(4, 1fr)（固定列数，避免 auto-fit 干扰错位） - 关键图用
grid-column: span 2横向拉宽，再配aspect-ratio: 16/9统一视觉比例 - 紧随其后的图用
grid-row-start: 1强制回到第一行，实现“右侧顶对齐”效果 - 务必给每个
.grid-item设overflow: hidden和img { width: 100%; height: 100%; object-fit: cover; }，否则裁剪错位
更稳的替代方案：column-count + break-inside
如果你要的是“高度不一、自然参差、无限加载”的错落感，column-count 是目前唯一纯 CSS、零 JS、兼容性好、浏览器原生支持的解法。
- 父容器设
column-count: 3+column-gap: 12px+break-inside: avoid - 每张图必须包裹在块级容器里（如
<figure></figure>），不能直接放<img>，否则可能被断开 - 图片自身不设固定高度，靠
width: 100%+height: auto保持原始比例，浏览器自动按列高分配 - 响应式只需媒体查询改
column-count：小屏切 2 列，超小屏切 1 列
容易踩的坑：aspect-ratio 和 object-fit 失效
这两个属性看似简单，但组合使用时极易失效，导致错格变错位。
-
aspect-ratio必须作用在网格项容器（如.grid-item）上，而不是<img>标签本身 -
object-fit: cover只在元素有明确宽高时生效；若父容器高度由内容撑开，cover 就不起作用 - Safari ≤16.3 不支持
aspect-ratio，需降级：用padding-top: 75%+position: relative+ 绝对定位图片 - 别在
<img>上同时写height: auto和object-fit—— 浏览器会忽略后者
错格照片墙最难的不是写几行 CSS，而是分清你要的是“设计驱动的可控错位”，还是“内容驱动的自然参差”。前者用 Grid 显式跨度，后者绕开 Grid，用 column-count 更省心。混用两者，八成翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
