如何使网格模板区域与网格区域一起使用？

Question

我在这里的grid-template-area区域没有任何作用： https://codepen.io/ta3aleb/pen/ErOpvr

grid-template-areas: 
    "node1 . . node2 . . . node3"
    "node4 . . . node5 . . node6"
    ". . . . . node7 . .";

任何想法可能是什么原因造成的？

Answer 1

.grid-container只有一个子元素，即ul，浏览器不知道如何仅将一个元素呈现为八列。将选择器更改为

.grid-container ul{
...
}

或

.grid-container > ul{
...
}