浏览器提示grid-template-areas值无效，但验证器判定合法

问题代码 #

原始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 ."

验证与异常情况 #

使用grid-validator验证显示合法：

• 包含7行
• 呈矩形
• 每行7列
• 所有区域连续且为矩形

但Chrome、Firefox浏览器均无法解析该值，提示“Invalid value”。

问题原因 #

核心问题出在第一行的b0区域：它在第一行的第2列和第7列各出现一次，中间被c0、d0、e0、f0这些不同区域隔开。

根据CSS Grid规范，同一个命名的网格区域必须是连续的矩形块，不能被其他区域拆分打断。你这里的b0属于非连续的同区域命名，违反了规范，因此浏览器直接判定该grid-template-areas值无效。

你使用的grid-validator存在检测漏洞，未识别出这种非连续的同区域命名问题。

内容的提问来源于stack exchange，提问作者Simon Baars