Grid布局不支持无限滚动，仅能实现可滚动网格；无限滚动需JS驱动，如IntersectionObserver监听哨兵、动态追加DOM，Grid仅作渲染层；Pinterest式错落效果推荐column-count而非Grid。
Grid 布局本身不支持无限滚动——它只负责静态网格划分，滚动行为由容器的 overflow 控制，而“无限加载”必须靠 JS 驱动。直接用 display: grid + overflow-y: auto 只能得到一个可滚动的固定网格，不是真正意义上的“无限滚动”。
Grid 容器加 overflow 实现的是“可滚动网格”，不是“无限滚动”
很多人混淆了这两个概念：前者是内容超出容器时允许滚动查看（类似长表格），后者是滚动到底部时动态插入新数据。Grid 本身没有监听滚动、触发加载、管理分页的能力。
-
grid-template-columns和grid-auto-rows决定布局结构，但不会随滚动自动扩容 - 给父容器设
overflow-y: auto后，所有子项仍一次性渲染完毕，内存和性能压力大 - 没有内置机制识别“滚动到底部”，
IntersectionObserver或scroll事件得自己加 - 响应式列数变化（如从 4 列切到 2 列）时，已渲染的旧项不会自动重排，容易错位
真要实现无限滚动网格，Grid 只能当“渲染层”，不能当“调度层”
把 Grid 当作最终卡片排列的“画布”，但数据加载、节流、哨兵管理、DOM 追加都得 JS 控制。典型组合是：IntersectionObserver 监听哨兵 + 动态 append() 新 div + Grid 自动布局新项。
- 初始网格用
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，保证列数自适应 - 每次加载后，用
document.getElementById("grid").append(...newItems)插入新卡片（不要 innerHTML +=） - 哨兵元素（
loading-sentinel）必须放在 Grid 容器最末尾，且设margin-top: auto或单独占一行避免被 Grid 压缩 - 避免对每个新项单独设置
grid-column/grid-row，否则破坏自动流动，改用grid-auto-flow: row让 Grid 自己安排
高度不一的“错落感”别硬套 Grid，优先用 column-count
如果你想要 Pinterest 那种每列高度独立、图片自然参差的效果，Grid 在纯 CSS 下做不到。强行用 Grid 模拟会导致列高强制对齐、空白撕裂或 JS 计算每张图高度——既复杂又卡顿。
立即学习“前端免费学习笔记（深入）”；
-
column-count: 3+break-inside: avoid是目前唯一纯 CSS、无 JS、兼容性好、懒加载友好的方案 - Grid 的
grid-row-end: span 2只适合固定尺寸、明确设计稿的“可控错落”，不适合动态图片墙 - 若坚持用 Grid 实现视觉错落，必须配合 JS 测量每张图真实高度再分配
grid-row，但首次渲染会闪、SSR 不友好、滚动卡顿明显
真正难的不是让网格“看起来无限”，而是控制加载时机、防抖重复请求、处理骨架屏、维持滚动位置、兼容 SSR ——这些 Grid 一句代码都不管，全得你手写逻辑。
