应优先用grid-auto-rows: minmax(min-content, max-content)实现错落，而非grid-template-rows: auto；后者仅使各行按内容撑高但视觉仍对齐，前者才真正支持每行独立自适应高度。
grid-template-rows 用 auto 还是 minmax？
直接写 grid-template-rows: auto 不会实现错落，它只是让每行按内容撑高，但所有行仍对齐成“栅格”，视觉上还是整齐的。真正要错落，得放弃统一行高控制，改用 grid-auto-rows + minmax() 或干脆不用行定义。
常见错误是给容器写死 grid-template-rows: repeat(3, 200px)——这等于锁死所有行高度，再怎么放内容都压不扁、撑不开。
-
grid-auto-rows: minmax(150px, max-content)：让每行至少 150px，但允许根据内容（比如长标题、多段文字）自动增高，相邻行高度就可能不同 - 完全不设
grid-template-rows，只靠grid-auto-flow: row（默认值）+ 子项自身height或min-height，也能自然错落 - 若需部分项拉伸占满整行，用
grid-row: span 2，但注意：跨行项会强制拉高所在行，影响错落节奏
grid-row: span 和 grid-row-start/end 怎么选？
错落布局里，grid-row: span 2 比 grid-row: 2 / 4 更安全，因为后者依赖你对当前行号的准确预判——一旦前面插入新项或响应式删项，整行编号偏移，后续定位全乱。
但 span 也有陷阱：如果某项内容极短，span 2 会强行拉高两行，反而破坏错落感；而内容过长时，又可能和下一项重叠（尤其没设 overflow: hidden）。
- 优先用
grid-row: span 1（默认），让每项自决高度 - 仅对明确需要“占两行视觉体量”的卡片用
span 2，并配合min-height: 240px防止塌缩 - 避免混用
grid-row-start和grid-row-end手动指定线号，调试成本高且易失效
错落网格里图片高度怎么不扯变形？
object-fit: cover 在错落布局中经常失效，不是语法错，而是父容器没给明确高度约束——Grid 项默认不继承高度，img 只能按原始宽高比渲染，一挤就糊或留白。
最简方案不是调 img，而是控父容器：
- 给每个网格项（如
.card）设aspect-ratio: 4/3，再让img宽高 100%，object-fit: cover就能生效 - 旧版 Safari 不支持
aspect-ratio？用padding-top: 75%+position: relative+img { position: absolute; } - 别给
img单独设height: 100%，它会强行拉伸，破坏错落节奏
gap 和 margin 在错落布局里谁更靠谱？
错落布局中，gap 仍是首选，但它只控制项与项之间的空隙，**不控制项与容器边缘的距离**。如果顶部第一行和底部最后一行贴边难看，别用 margin 给首尾项加边距——那会破坏 Grid 自动排列逻辑，尤其在响应式增删项时容易漏掉。
正确做法是统一用容器 padding 撑出内边距，再配 gap 控制项间距：
-
.grid { padding: 24px; gap: 16px; }—— 简单干净 - 如果某些项需要更大呼吸感（比如带标题的主卡），单独加
padding，而不是靠margin推开邻居 - 旧版 Safari 要兼容？补一句
grid-gap: 16px（已废弃但有效）
错落的本质是放弃“所有行等高”这个执念，但很多人卡在图片裁剪、首尾留白、跨行错位这三个点上——它们都不是 Grid 本身的问题，而是对容器尺寸约束的理解偏差。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
