grid-template-rows 不能实现骨架屏按需加载，因其仅定义固定轨道结构，不响应数据状态；应改用伪元素占位+类名控制显隐，确保 SSR 友好与跨浏览器稳定。
不能靠 grid-template-rows 或 grid-template-columns 实现骨架屏的“按需加载”——它们只定义轨道尺寸，不控制渲染时机，也不响应数据加载状态。
为什么 grid-template-rows 不能用来切换骨架/真实内容
Grid 容器一旦声明了 grid-template-rows: 100px minmax(25px, auto) repeat(3, 25px)，浏览器就在 CSSOM 构建阶段锁定了轨道结构。无论子元素是否存在、是否加载完成，这些轨道都已参与布局计算、分配空间。骨架屏需要的是「先占位、后填充」，不是「先划格、等掉入」。
-
grid-template-rows是纯布局指令，和display、visibility、JS 加载状态完全无关 - 哪怕你把真实内容
display: none，骨架元素也得自己撑高容器；否则 Grid 轨道会塌缩，导致骨架错位或消失 - 用
fit-content()或minmax()做“弹性高度”在 Safari 和旧版 Chrome 中兼容性极差，移动端尤其不稳定
真正能复用 Grid 布局的骨架屏结构
让骨架和真实内容共享同一套 Grid 轨道定义，但用独立 DOM 或伪元素实现占位，避免重排。关键不在 Grid 本身，而在容器存在性和显隐控制方式。
- 骨架层用
::before或::after伪元素 +position: absolute叠在 Grid 容器上，容器必须设position: relative且有明确height或aspect-ratio - 真实内容用普通 Grid 子项写法，初始加
opacity: 0; visibility: hidden，加载完成后仅切一个is-loaded类，里面只写opacity: 1; visibility: visible - 如果骨架要分块对应 Grid 区域（如头像、标题、描述），每个区块需单独包裹并设
overflow: hidden，否则扫光动画会溢出圆角或边框
容易被忽略的移动端陷阱
iOS Safari 对 background 动画的渲染非常敏感，稍不注意就会边缘发虚、光效卡顿、甚至整块消失。
立即学习“前端免费学习笔记（深入）”；
- 所有骨架容器必须加
overflow: hidden，哪怕只是border-radius圆角 —— 否则渐变背景滑出时会漏底色 -
background-size必须用固定像素值（如300px 100%），禁用vw、rem或百分比宽度，Safari 会忽略或解析错位 - 扫光动画只用
background-position，别用transform: translateX()—— 后者在 WebView 中易触发锯齿和重绘抖动 - 多块骨架同时动画时，务必加错峰
animation-delay（如-0.2s、-0.4s），否则 iOS 上容易集体卡顿
最稳的路径不是让 Grid “智能响应”，而是让骨架成为视觉锚点、真实内容成为可插拔模块：Grid 轨道只管最终布局，骨架靠伪元素定位，加载逻辑全由 JS 控制类名或 DOM 存在与否 —— 这样既保 SSR 友好，又避开了所有浏览器对 Grid 响应式轨道的实现差异。
