嵌套网格区域未正确对齐

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

  

...网格似乎不想在$http.post("/api/data-dashboard.php",{from:$scope.from}).then(function(response){}); 和grid-area: aside;的正确位置正确呈现。我想这可能是因为这两个嵌套在其他元素中？

是。这是对的。

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

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

如规范中所述：

  

6. Grid Items

     

网格容器的每个流入子项都成为网格项。

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

结论：您始终需要将grid-area: main;或display: grid应用于父级，以便网格属性可以对孩子起作用。