css - 如何使网格模板区域与网格区域一起工作？

Question

我在这里的网格模板区域没有任何效果: 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{
...
}