网格区域在CSS网格中的布局不正确

网格区域在CSS网格中的布局不正确

使用该

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

属性]

所有字符串的列数必须相同，否则声明无效。

如果命名的网格区域跨越多个网格单元，但是这些单元不形成单个填充矩形，则声明无效。

在此模块的将来版本中，可能会允许非矩形或不连续区域。