我想使我的网站使用CSS网格系统,但似乎无法正常工作。这是我的代码:
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo faq" "about-us"; } .logo { background-color: blue; grid-area: logo; } .faq { background-color: red; grid-area: faq; } .aboutUs { background-color: cyan; grid-area: about-us; } <div class="grid"> <div class="logo"> LOGO </div> <div class="faq"> FAq </div> <div class="aboutUs"> About-us </div> </div>
使用该grid-template-areas属性时,字符串值必须具有相同的列数。
grid-template-areas
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo faq" "about-us about-us"; } .logo { background-color: blue; grid-area: logo; } .faq { background-color: red; grid-area: faq; } .aboutUs { background-color: cyan; grid-area: about-us; } <div class="grid"> <div class="logo"> LOGO </div> <div class="faq"> FAq </div> <div class="aboutUs"> About-us </div> </div>
您可以使用句点或句点的不间断行来表示一个空单元格(规范参考)。
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "logo faq" " ... about-us"; } .logo { background-color: blue; grid-area: logo; } .faq { background-color: red; grid-area: faq; } .aboutUs { background-color: cyan; grid-area: about-us; } <div class="grid"> <div class="logo"> LOGO </div> <div class="faq"> FAq </div> <div class="aboutUs"> About-us </div> </div>
从网格规范:
[7.3。 命名区域:the grid-template-areas属性]
the grid-template-areas
所有字符串的列数必须相同,否则声明无效。
如果命名的网格区域跨越多个网格单元,但是这些单元不形成单个填充矩形,则声明无效。
在此模块的将来版本中,可能会允许非矩形或不连续区域。