grid-template-rows 无法实现骨架屏按需加载，因其仅定义固定轨道尺寸，不控制渲染时机；骨架屏需通过类名切换或dom控制显隐，配合minmax()轨道与独立骨架占位实现。
不能靠 grid-template-rows 实现骨架屏按需加载 —— 它只定义轨道尺寸，不控制资源请求时机。 骨架屏的“按需”本质是延迟渲染占位结构 + 延迟样式生效，而 Grid 的轨道声明在 CSS 解析阶段就已确定，和是否显示内容无关。
为什么 grid-template-rows 无法触发骨架屏加载逻辑
Grid 容器一旦设了 grid-template-rows: 100px repeat(3, 25px)，浏览器就在构建 CSSOM 时锁定了 4 行轨道高度。无论子元素是否存在、是否加载完成，这些轨道都已分配空间、参与布局计算。骨架屏需要的是「先画空框，再填内容」，不是「先划好格子，等内容掉进来」。
- 骨架屏容器必须有明确宽高（
width/height或aspect-ratio），否则background-position动画会错位 -
grid-template-rows是布局指令，不是条件渲染开关；它不响应 JS 加载状态，也不受display: none影响 - 想让骨架“只在加载时出现”，得用类名切换或 JS 控制 DOM 存在与否，而非靠 Grid 轨道本身做条件判断
真正能配合骨架屏的 Grid 轨道写法
骨架屏结构本身建议用普通块级元素（div）实现光扫效果，Grid 只用于后续真实内容的布局。但如果你坚持用 Grid 容器承载骨架 + 真实内容，关键在于：让骨架和真实内容共用同一套轨道定义，且容器高度由骨架撑开。
- 给 Grid 容器设固定宽高或
min-height，避免骨架出现时页面跳动 -
grid-template-rows应使用minmax()或auto，而不是纯固定值，例如：grid-template-rows: minmax(100px, max-content) repeat(3, minmax(25px, auto)) - 骨架元素自身不设
grid-row，而是用place-self或默认流式填充，确保它能随轨道变化自然对齐 - 真实内容插入后，用
opacity: 0 → 1或visibility: hidden → visible切换，避免重排
容易被忽略的兼容性陷阱
很多开发者以为用 grid-template-rows: fit-content(200px) 就能限制首行高度并适配骨架，但实际：
-
fit-content()在grid-template-rows中浏览器支持极差：Chrome 115+ 才开始实验性支持，Firefox 当前完全不识别 - 移动端 Safari 对
repeat()嵌套minmax()的解析不稳定，建议拆成显式值（如100px 25px 25px 25px）保底 - 如果骨架用了
background: linear-gradient(...)，务必加overflow: hidden，否则光扫动画在 iOS 上会溢出容器边缘
最稳妥的做法：骨架用独立 div 占位 + background-position 动画，真实 Grid 容器在 JS 加载完成后才插入 DOM 或移除 hidden 属性——轨道定义本身不需要“按需”，需要按需的是容器的存在与否。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
