嵌套的 CSS 网格不显示嵌套项

Question

我遇到了嵌套 CSS GRID 的问题 - 嵌套的网格项目未正确显示 - 已反复检查标记，但我没有看到错误。

第一个网格行应该跨越三列（确实如此），并且网格项设置为 display:grid 有 2 个子网格项，子项没有跨越正确的列。

谁能解释为什么这不起作用？

在这里提琴：https://jsfiddle.net/qL683ubz/1/

这是css：

.insights-grid-container {
    display: grid;
    max-width: 998px;
    margin: 0px auto;
    grid-template-columns: auto auto auto;
    grid-template-rows: 300px 300px 300px 300px 300px;
    grid-gap: 5px 5px;
    background-color: #ccc;
}

.insights-grid-container div {
    background-color: #fff;
}

.insights-grid-container > div > div:first-child {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* row, column, row, column */
.insights-grid-container .article.hero  {
    grid-area: 1 / 1 / span 1 / span 3;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 300px;
    grid-gap: 5px 5px;
    background-color: #cc0000;
}
    .insights-grid-container > .article.hero > div:first-child {
        grid-area: 1 / 1 / span 1 / span 2;
    }
    .insights-grid-container > .article.hero > div:last-child {
        grid-area: 1 / 3 / span 1 / span 1;
    }





.insights-grid-container > .article.event {
    grid-template-columns: auto;
    grid-template-rows: 90px;
}

.insights-grid-container > .article.aside-left {}
.insights-grid-container > .article.aside-right {}

这里是网格：

<div class="insights-grid-container">

    <div class="article hero">
        <div style="background-image: url(https://via.placeholder.com/600x300);" />image</div>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>

    <div class="article aside-left">
        <div style="background-image: url(https://via.placeholder.com/300x300);" />1 </div>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>

    <div class="article"><h3>2</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>3</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>4</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>5</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>


    <div class="article aside-right">
        <div style="background-image: url(https://via.placeholder.com/300x300);" />1 </div>
        <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
        </div>
    </div>


    <div class="article"><h3>2</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>3</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>4</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>
    <div class="article"><h3>5</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

    <div class="article event"><h3>event</h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</div>

</div>

Answer 1

子网格实际上不知道（使用当前的 1 级网格规范）在 dom 中任何位置向上（或向下）发生的任何和所有网格。

当元素具有display: grid 属性时，将定义一个新 网格。网格规则将仅适用于该网格元素的第一级子元素。

话虽如此，我相信你想要的而不是grid-template-columns: auto auto auto; 规则是grid-template-columns: 1fr 1fr 1fr;。这将防止将不存在的图像缩小为其不存在的内容。

fr 是 "fraction" 测量单位。 1fr 1fr 1fr 指示网格具有三个轨道（它可以在两个方向、行和列上工作），它们完全共享在给出其他硬性放置规则后留下的空间。

Here 是一个更新的小提琴，其中子网格的第一个元素正确（如果我理解正确的话）跨越前两个列。