在现代 Web 开发中，骨架屏（Skeleton Screen）已经成为了提升用户体验的常用手段之一。而在实现骨架屏时，CSS Grid 可以帮助我们让代码更加简洁和灵活。本文将介绍如何使用 CSS Grid 实现骨架屏效果的教程。
什么是骨架屏
骨架屏是指在网页内容加载完成前，先展现页面的基本结构，给用户提供一种加载中的预览效果，增强了用户的交互体验。通常，骨架屏是通过一系列简单的占位符、占位图或者简单的纯色块来实现的。
骨架屏的优点：
- 提升用户满意度，降低用户等待感受。
- 告诉用户哪些元素即将出现，让用户精准等待。
- 对SEO友好，搜索引擎可以直接获取到页面的基本结构。
骨架屏的实现
- HTML布局
-- -------------------- ---- ------- ---- ------------------ ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ---- ------------------- ------
先创建一个 container 容器，里面包含了8个 item，我们需要让这8个 item 填充满整个 container。
- CSS 样式
-- -------------------- ---- ------- ---------- - -------- ----- ---------------------- --------- ----- ---- ----- -------- ----- ----------------- ----- - ----- - ----------------- ----- - -- - ---- --------------------------- -- ------------ - -------- --- -------- ------ ------ ----- --------------- ----- ----------------- ----- -------------- ---- -
首先，使用 display: grid 定义父元素 .container 为网格布局，grid-template-columns: repeat(4, 1fr); 定义了 4 列，每一列的占比为 1 ，即每个 item 将会占据 1/4 的宽度 。gap: 10px; 定义每个 item 之间的距离为 10px 。padding: 10px 定义了容器的内边距。background-color: #eee 为整个容器设置了一个灰色背景。
接着，使用 background-color: #fff 为 item 设置白色背景色，并使用 :before 伪元素创建一个宽高相同、背景为灰色的占位块，通过 padding-bottom: 100%; 让高度等于实际宽度, border-radius: 4px; 设置圆角使其更加美观。
实现效果
在加载前填充了一个占位块，突显了整个页面的布局，起到了很好的预览效果。
总结
本文教程中，我们通过 HTML 布局和 CSS 样式，使用 CSS Grid 实现了骨架屏效果。希望这篇文章对于想要了解如何使用 CSS Grid 实现骨架屏的读者有所帮助。除了骨架屏，CSS Grid 还有很多强大的布局功能，如果想要学习 Grid 的更多应用，可以参考 CSS Grid 相关的学习资料。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649e2c2f48841e9894ab3722