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{
...
}