使用该
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 > <div > LOGO </div> <div > FAq </div> <div > 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 > <div > LOGO </div> <div > FAq </div> <div > about-us </div></div>从网格规范：
[7.3。 命名区域：the grid-template-areas
属性]
所有字符串的列数必须相同，否则声明无效。
如果命名的网格区域跨越多个网格单元，但是这些单元不形成单个填充矩形，则声明无效。
在此模块的将来版本中，可能会允许非矩形或不连续区域。
