在使用 CSS Grid 进行页面布局时，我们可能会遇到一个问题：当子元素中存在背景颜色时，其被遮挡的情况。这在一些场景下会造成视觉上的不良影响，需要我们进行解决。下面，我们将详细介绍这个问题的原因和解决方式。
问题原因
当使用 CSS Grid 进行布局时，父元素会成为网格容器，子元素则成为网格项。当网格项中存在背景颜色时，由于网格容器默认是没有高度的，所以子元素的高度无法正确计算，导致其被遮挡。
解决方式
解决这个问题的方法比较简单，我们只需要将网格容器的高度设为与其子元素高度相等即可。我们可以使用 min-height 或者 height 属性来设置高度。
-- -------------------- ---- ------- ----- - -------- ----- ----------- ----- -- -- ---------- -- - -- ---- ------ -- ----- - -------- ----- ------- ----- -
这样，网格容器的高度就能正常计算，并将子元素的背景颜色正确展示出来。
示例代码
我们来看一个具体的示例，该示例中的 row 类表示一个网格行，其中 box 类表示一个网格项。
-- -------------------- ---- -------
---- -------------
---- ------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
---- ------------
---- --------------- -------
---- --------------- -------
---- --------------- -------
------
-------- -------------------- ---- ------- ----- - -------- ----- ----------- ----- - ---- - -------- ----- ---------------------- --------- ----- - ---- - ----------------- -------- ------ -------- ----------- ------- -
在这个示例中，我们将网格容器的高度设置为 min-height: 100%，以保证其高度能与子元素相等。我们同样设置了子元素的背景颜色为红色，文本颜色为白色，以便于看出背景颜色是否正确展示。
如果我们不对网格容器的高度进行设置，子元素的背景颜色将无法完整展示：
而如果我们对网格容器的高度进行设置，子元素的背景颜色就能正确展示了：
总结
CSS Grid 为我们提供了强大的布局手段，但在使用时也需要注意一些问题。当子元素中存在背景颜色时，可能会出现遮挡情况，此时我们需要对网格容器的高度进行设置，以确保子元素的背景颜色能够正常展示出来。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ab0b1548841e98946fcca1