浏览器报告“grid-template-areas”的值无效，但验证器说它是正确的

Question

我的CSS如下：

display: grid;
grid-template-areas: "a0 b0 c0 d0 e0 f0 b0" "g1 g1 g1 g1 g1 . ." "i2 i2 i2 i2 . . ." "j3 j3 j3 . k3 k3 k3" "l4 l4 m4 m4 . . ." "a5 b5 c5 n5 n5 o5 o5" ". . . d6 e6 f6 .";

让我布置一下网格，以便更容易查看：

"a0 b0 c0 d0 e0 f0 b0"
"g1 g1 g1 g1 g1 . ."
"i2 i2 i2 i2 . . ."
"j3 j3 j3 . k3 k3 k3"
"l4 l4 m4 m4 . . ."
"a5 b5 c5 n5 n5 o5 o5"
". . . d6 e6 f6 ."

我使用了这个网格验证器，它报告它是有效的：https://github.com/evrom/grid-validator

• 有7行
• 是长方形
• 每行有 7 列
• 所有区域都是连续且矩形的

为什么浏览器不解析它并说

Invalid value

？

我尝试过的浏览器： Chrome、Firefox

Answer 1

仔细观察，第一行包含两次

b0

。

太糟糕了，验证器没有捕捉到这一点！