嵌套网格区域未正确对齐

Question

我正在尝试重新创建 CSS 网格布局。当我为每个类名声明 grid-area 时，网格似乎不想在 grid-area: aside; 和 grid-area: main; 的正确位置正确呈现。我想这可能是因为这两个嵌套在其他元素中？

期望的结果：https://codepen.io/chrisburton/full/YVrqRr/

实际结果：https://codepen.io/chrisburton/pen/eWqJRQ

CSS:

.container {
    display: grid;
    grid-template-areas: "nav nav" 
                         "aside main"
                         "foot foot"
                         "footer footer";
    grid-template-columns: 18rem 1fr;
}

.nav { 
    grid-area: nav; 
    background: #FFAAAA;
}


.aside { 
    grid-area: aside; 
    background: #D46A6A; 
}

.main { 
    grid-area: main; 
    background: #AA3939; 
}

.article-footer { 
    grid-area: foot;
    background: #9A3939;
}

.footer {
    grid-area: footer;
    background: #801515;
}

Answer 1

... the grid doesn't seem to want to render properly in the right places for grid-area: aside; and grid-area: main;. I assume this may be because these two are nested inside other elements?

是的。没错。

一个grid formatting context的范围仅限于父子关系。

这意味着网格容器始终是父项，而网格项始终是子项。网格属性仅在此关系中起作用。

如规范中所述：

6. Grid Items

Each in-flow child of a grid container becomes a grid item.

子项之外的网格容器的后代不是网格项，不会接受网格属性。此外，正如上面的规范语言所暗示的那样，children that are out-of-flow（即绝对定位）也不是网格项。

底线：您将始终需要将 display: grid 或 display: inline-grid 应用于父项，以便网格属性对子项起作用。

嵌套网格区域未正确对齐

nested grid areas not aligning properly

css

css-grid