Question

我在使用嵌套CSS GRID时遇到问题-嵌套的网格项无法正确显示-反复检查了标记，但看不到错误。

第一个网格行应跨越三列（确实如此），并将网格项设置为display：grid，其中有2个子网格项，这些子项未跨越正确的列。

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

这是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属性时，将定义一个 new 网格。网格规则仅适用于该网格元素的第一级子级。

话虽这么说，但我相信您想要的不是grid-template-columns: auto auto auto;规则，而是grid-template-columns: 1fr 1fr 1fr;。这样可以防止将不存在的图像缩小到其不存在的内容。

fr是"fraction"的度量单位。 1fr 1fr 1fr指示网格具有三个轨道（它在方向，行和列上均有效），它们完全共享在给出其他严格的放置规则后剩余的空间。

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

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

1 个答案: