tailwind响应式网格需显式声明grid、连续断点、统一骨架结构；哨兵元素须可布局且位于观察容器内；col-span需按断点显式控制。
直接用 grid 或 flex + 断点类就能实现，但关键在列数切换、项高一致性、骨架占位这三处——多数人卡在这儿，不是 Tailwind 不行，是没理清响应式网格的触发条件。
为什么 grid-cols-2 在中屏不生效？
根本不是类名写错，而是父容器缺失 grid 声明，或断点链断裂。Tailwind 的 grid-cols-* 只生成 grid-template-columns，不自动加 display: grid。
- 必须显式写
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3，漏掉grid就等于没开网格上下文 - 断点必须连续：如果只写
md:grid-cols-3，小屏下浏览器按默认block渲染，不会“回退”到grid-cols-1 - 用 DevTools 的 Layout 面板确认
grid-template-columns是否真实输出，别只看 class 名称 - 避免在父级用
hidden或opacity-0控制显示，这会让子项的grid计算失效
列表项高度随断点变化时，如何防止页面跳动？
响应式列表最常被忽略的是骨架项与真实项的高度错位。单列变双列时，项高变矮，若骨架仍按旧高度渲染，加载后页面会“抖一下”。
- 骨架项必须和真实项使用完全相同的结构：
flex flex-col或grid grid-cols-1，不能一个用flex一个用grid - 固定高度类优先用
h-24、min-h-16，而非依赖内容撑开的h-fit或min-h-full - 如果项内含图片，骨架里用
bg-gray-200 animate-pulse+aspect-video或aspect-square保比例 - 断点切换后（比如从
sm:grid-cols-1切到md:grid-cols-2），骨架高度要同步缩放，否则col-span-1会溢出
无限滚动列表中，为什么“到底了”却不触发加载？
这不是 IntersectionObserver 没配好，而是哨兵元素（sentinel）位置或状态不对。Tailwind 本身不处理逻辑，但样式会影响观察器行为。
- 必须在列表末尾加一个占位哨兵：
<div class="h-px"></div>，不能用invisible、opacity-0或absolute定位，否则可能脱离视口流 - 哨兵不能被
display: none或从 DOM 移除，observer.observe()前它必须存在且可计算布局 - 如果列表容器设了
max-h-[60vh]或overflow-y-auto，确保哨兵在该容器内，而不是挂在body下——IntersectionObserver 默认观察 viewport，但自定义 root 时需手动传入 - 移动端 Safari 对
threshold: 0支持不稳定，建议设为0.05或0.1，配合rootMargin: '0px 0px 100px 0px'预加载更稳
真正难的不是写对几个断点类，而是当 sm:grid-cols-2 和 lg:grid-cols-4 同时作用于一个列表，而其中某项又用了 col-span-2 ——这时你得确认父容器是否在所有断点都声明了 grid，以及该项是否在对应断点有明确的 sm:col-span-1 lg:col-span-2 显式控制。没写全，浏览器就自己猜，一猜就错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
