在前端开发中，我们经常需要设计一个骨架文本效果，以便用户在等待页面加载的同时得到一些基本信息。本文将介绍如何使用 CSS 网格布局来实现这样的效果，包括具体的技巧和示例代码。同时，我们还会探讨一些实用的调整和优化。
网格布局
首先，我们需要了解网格布局的基础知识。网格布局是 CSS 的一种排版方式，它可以将页面划分成多个行和列，并将内容放置在其中。网格布局有两个关键概念：
- 网格容器（grid container）：是一个元素，它被设置为网格布局，所有其子元素都作为网格项排列。
- 网格项（grid item）：是网格布局中的子元素，它们被排列在行和列中。
网格布局可以通过设置 grid-template-columns 和 grid-template-rows 属性来定义网格的列和行。例如，下面的代码定义了一个网格布局，拥有两个列和三个行：
.grid-container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 50px 100px 150px;
}使用网格布局的好处是可以轻松实现复杂的布局，例如等高的列或响应式布局。
实现骨架文本效果
我们现在已经掌握网格布局的基础知识，接下来我们将介绍如何实现骨架文本效果。下面是一个基本的骨架文本效果示例：
我们希望在加载页面时，先显示一些基本信息（例如卡片的标题和图片），并在加载完成后再加载实际内容。
下面是实现骨架文本效果的步骤：
- 创建网格容器和网格项。我们需要创建一个网格容器元素，并在其中创建网格项元素。
- 设置网格布局和网格项样式。在网格容器上设置
display: grid，并定义网格布局的列和行。同时，为每个网格项设置背景颜色和相应的间距。 - 将实际内容置于背景之上。在每个网格项中添加一个子元素，将实际内容置于其之上，并使用绝对定位来覆盖其背景。这样，实际内容就不会被背景遮挡。
接下来，我们将逐步说明这些步骤。
步骤 1：创建网格容器和网格项
首先，我们需要在 HTML 文件中创建骨架文本布局的基本结构。假设我们要创建一个类似卡片的布局，其中包括标题、图片和描述。
<div class="card"> <h2>这里是标题</h2> <div class="image"></div> <p>这里是描述</p> </div>
然后，我们需要将 card 容器设置为网格布局，并定义其列和行。我们可以使用以下样式设置简单的网格布局：
.card {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: auto 100px auto;
}这将创建一个持续一列、自适应高度的网格，其中包括了带有标题、图片和描述的三个行。
接下来，我们需要根据它们的位置设置网格项的样式。我们将使用不同的背景颜色来绘制骨架文本的效果。对于我们的这个示例，我们将使用以下样式：
-- -------------------- ---- ------- ----- - -------- ----- ---------------------- ---- ------------------- ---- ----- ----- ----------------- -------- - ----- -- - ----------------- -------- - ----- ------ - ----------------- -------- - ----- - - ----------------- -------- -
这里我们将 card 容器的背景设置为 #eeeeee，将标题、图片和描述的背景设置为 #cccccc。
步骤 2：将实际内容置于背景之上
接下来，我们需要将实际内容置于背景之上。我们将在每个网格项中添加一个子元素，并将实际内容置于其之上。
-- -------------------- ---- -------
---- -------------
---- --------------
--------------
------
---- --------------
---- ----------------------------
------
---- --------------------
------------
------
------在这个示例中，我们为每个网格项添加了一个子元素，并将实际内容放置在其之上。这些子元素的样式应为：
-- -------------------- ---- ------- ----- ------ - --------- --------- - ----- ------ -- - --------- --------- ---- -- ----- -- ------ -- ------- -- ------- ----- - ----- ------ - --------- --------- --------- ------- - ----- ------ -------------- - --------- --------- ---- ----- ----- ----- ------ ----- ------- ----- ------- ----- ----------------- ------------------------------------ ---------------- ------ - ----- ------------ - --------- --------- - ----- ------------ - - --------- --------- ---- -- ----- -- ------ -- ------- -- ------- ----- ------ ---- -
这里我们使用了绝对定位来将实际内容覆盖在其对应的骨架文本上。需要注意的是，在设置 top、left、right 和 bottom 属性时，需要使用百分比和 margin: auto 的组合来以装载成比例。这样，实际内容就不会被背景遮挡。
实例代码
上述实现的完整代码如下：
-- -------------------- ---- -------
---- -------------
---- --------------
--------------
------
---- --------------
---- ----------------------------
------
---- --------------------
------------
------
-------- -------------------- ---- ------- ----- - -------- ----- ---------------------- ---- ------------------- ---- ----- ----- ----------------- -------- - ----- ------ - --------- --------- - ----- ------ -- - --------- --------- ---- -- ----- -- ------ -- ------- -- ------- ----- ----------------- -------- - ----- ------ - --------- --------- --------- ------- ----------------- -------- - ----- ------ -------------- - --------- --------- ---- ----- ----- ----- ------ ----- ------- ----- ------- ----- ----------------- ------------------------------------ ---------------- ------ - ----- ------------ - --------- --------- - ----- ------------ - - --------- --------- ---- -- ----- -- ------ -- ------- -- ------- ----- ------ ---- ----------------- -------- -
调整和优化
现在，我们已经了解了如何使用网格布局来实现骨架文本效果。但是，在实际开发中，可能需要进行一些调整和优化。
调整行高
一般来说，我们可以通过设置行高来控制每一行网格项之间的间距。默认情况下，网格项之间的间距是根据 grid-gap 属性计算得出的。我们可以通过修改 card 容器的 line-height 属性来调整网格项之间的间距：
.card {
...
line-height: 1.5em;
}调整网格项宽度
有时，我们可能需要调整网格项的宽度以使其适合所需的设计。我们可以使用 grid-template-rows、grid-template-columns 和 grid-template-areas 属性来调整它们的大小和位置：
-- -------------------- ---- -------
----- -
-------- -----
---------------------- ----- --- ----
------------------- ---- ----
--------------------
------ ----- ------
------ ----------- -------------
-
----- ------ -
---------- ------
-
----- ------ -
---------- ------
-
----- ------------ -
---------- ------------
-这里，我们使用 grid-template-areas 属性来将 card 容器划分成三个区域，分别对应于图片、标题和描述。同时，我们使用 grid-area 属性为每个网格项指定了它所属的区域。
响应式网格布局
最后，我们需要考虑响应式布局。在实际开发中，我们需要确保骨架文本效果在不同设备上都能正常工作。在这种情况下，我们可以使用媒体查询来为不同设备大小定义不同的网格布局：
-- -------------------- ---- -------
------ ----------- ------ -
----- -
---------------------- ----
------------------- ---- ----- -----
--------------------
-------
-------
--------------
-
----- ------ -
---------- ------
-
----- ------ -
---------- ------
-
----- ------------ -
---------- ------------
-
-在这个示例中，我们定义了一个媒体查询，以确保当设备宽度小于 768 像素时，骨架文本仍然能够正常显示。
结论
在本文中，我们介绍了如何使用 CSS 网格布局来实现骨架文本效果。我们涵盖了必要的步骤，以展示网格布局的基础知识和骨架文本布局的实现方法。我们还讨论了调整和优化需求，包括调整行高和网格项宽度以及响应式网格布局的实现方法。这些技巧将帮助您创建出更好的网站和应用程序，提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672eca35eedcc8a97c8ad01b