ネストされたグリッド領域が正しく整列しない

Question

CSSグリッドレイアウトを再作成しようとしています。各クラス名に対してgrid-areaを宣言すると、グリッドはgrid-area: aside;とgrid-area: main;の適切な場所に適切にレンダリングしたくないようです。これら2つが他の要素の中にネストされているため、これが原因であると思われますか？

望ましい結果：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

...グリッドが適切にレンダリングするようには見えませんgrid-area: aside;との適切な場所に210。これら2つが他の要素の中にネストされているため、これが原因であると思われますか？

はい。それは正しいです。

grid formatting contextの有効範囲は、親子関係に限定されています。

これは、グリッドコンテナは常に親であり、グリッドアイテムは常に子であることを意味します。グリッドのプロパティは、この関係内でのみ機能します。仕様に記載されているとおり

：

6. Grid Items

グリッド容器のそれぞれにおけるフロー子グリッドアイテムとなります。

子を超えるグリッドコンテナの子孫はグリッド項目ではなく、グリッドプロパティを受け入れません。また、上の仕様言語に暗示されているように、children that are out-of-flow（すなわち、絶対的に配置された）もグリッド項目ではありません。

ボトムライン：子供にグリッドプロパティを適用するには、常にdisplay: gridまたはdisplay: inline-gridを親に適用する必要があります。