为何左侧网格（grid）的row-gap属性无法正常生效？

我设置了两个并排的单列网格，二者HTML布局完全一致，CSS中为两个网格都配置了row-gap属性，但左侧网格的row-gap在网页中并未显示效果。

代码片段 #

HTML #

<div class="both-grids">
    <div class="show-grid-container">
        <div class="grid-item">show 1</div>
        <div class="grid-item">show 2</div>
        <div class="grid-item">show 3</div>
        <div class="grid-item">show 4</div>
        <div class="grid-item">show 5</div>
    </div>

    <div class="movie-grid-container">
        <div class="grid-item">movie 1</div>
        <div class="grid-item">movie 2</div>
        <div class="grid-item">movie 3</div>
        <div class="grid-item">movie 4</div>
        <div class="grid-item">movie 5</div>
    </div>
</div>

CSS #

.both-grids {
    padding-left: 100px;
}

.show-grid-container, .movie-grid-container {
    display: inline-grid;
    grid-template-rows: 40px 200px 200px 200px 200px;
    row-gap: 40px;
}

.movie-grid-container {
    padding-left: 80px;
    
}

.show-grid-container, .movie-grid-container > div {
    background-color: black;
    padding-right: 80px;
    padding-left: 80px;
}

问题原因及解决办法 #

原因：最后一条CSS规则错误地将.show-grid-container网格容器本身，和.movie-grid-container的子元素放在了同一个选择器中。这导致左侧网格容器被直接设置了黑色背景和左右内边距，而网格的row-gap属于容器内部的间隙，容器的背景色会填充整个容器区域（包括间隙），所以视觉上看不到row-gap的效果。右侧网格正常是因为这条规则只作用于它的子元素，容器本身没有背景色覆盖间隙。

解决办法：拆分最后一条CSS规则，仅对两个网格的子元素设置背景色和内边距：

.show-grid-container > div, .movie-grid-container > div {
    background-color: black;
    padding-right: 80px;
    padding-left: 80px;
}

修改后，左侧网格容器的背景不再覆盖row-gap区域，就能正常显示设置的40px行间距。

内容的提问来源于stack exchange，提问作者rakiyah