CSS Grid 骨架屏本质是用网格结构占位、约束尺寸、隔离光效动画，确保视觉零抖动；相比 Flex，Grid 支持二维布局、避免嵌套失效、降低维护成本。
用 CSS Grid 绘制骨架屏，本质不是“画图”，而是用网格结构提前占位、约束尺寸、隔离光效动画——这样骨架才能稳、不跳、不塌，数据加载后替换内容时视觉零抖动。
为什么不用 Flex 布局写骨架屏
Flex 适合一维排列（比如一行头像+标题+摘要），但骨架屏常需二维结构（如三列卡片+侧边栏+顶部导航）。一旦嵌套多层 flex，min-height、aspect-ratio 和 overflow: hidden 容易失效，光扫动画错位；Grid 的 grid-template-areas 可直接映射真实 DOM 区域，维护成本低。
必须显式声明 grid-template-rows/columns
不写 grid-template-rows 或依赖 auto-fit，会导致骨架容器高度塌陷，background-position 动画在 Safari 中发虚或卡顿。正确做法是：
-
grid-template-rows: 60px minmax(200px, 1fr) 80px—— 顶部导航、主内容区、底部固定高度 -
grid-template-columns: 240px 1fr 320px—— 左侧边栏、主内容、右侧推荐栏 - 每块区域（如
.skeleton-header）设height: 100%+overflow: hidden，否则光效滑出边界
骨架容器必须带 aspect-ratio 和 overflow:hidden
图片类占位（如头像、封面图）若只写 width: 100% 不设比例，缩放后会拉伸变形，导致骨架与真实内容错位。关键约束：
立即学习“前端免费学习笔记（深入）”；
- 用
aspect-ratio: 4/3替代height: 200px，兼容所有现代浏览器（2026 年已无兼容顾虑） - 每个骨架区块（
.skeleton-card、.skeleton-avatar）必须加overflow: hidden，否则background-position动画移出圆角区域会漏白边 -
background-size必须大于容器宽度（如300px 100%），不能用rem（iOS Safari 不支持）
光扫动画要分层写 background-image
单层渐变 = 整块同步亮，看不出结构层次。真正可用的写法是两层叠加：
background-image: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%), linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%); background-size: 300px 100%; background-position: -300px 0, 0 0; animation: shine 1.6s infinite;
第一层是静态结构灰度，第二层是透明度渐变的“光条”；background-position 初始值必须带单位（-300px，不能写 -300），否则旧版 Chrome 和 IE 直接忽略动画。
最易被忽略的是：Grid 骨架必须和真实内容使用完全一致的 grid-area 命名与尺寸约束，否则加载完成切换时会重排布局——那就不叫骨架屏，叫闪屏。
