Chrome浏览器是否支持CSS属性display: block grid语法？

这不是你的操作错误，本质是Chrome对CSS display双值语法的支持节奏比Firefox慢，部分场景下存在兼容性差异。

关于display双值语法的说明 #

CSS Display Level 3规范新增了双值语法，允许同时定义元素的外部显示类型（控制元素在文档流中的表现，比如block、inline）和内部显示类型（控制元素子元素的布局方式，比如grid、flex）。display: block grid; 的含义是：元素对外表现为块级元素，内部子元素采用网格布局。

浏览器支持差异 #

Firefox很早就完整实现了这一语法，但Chrome直到版本88才开始支持，而且在一些边缘场景下可能存在兼容bug：

• 如果你使用的Chrome版本低于88，肯定无法识别该语法；
• 即使是新版本Chrome，在某些复杂容器嵌套或属性组合的场景中，也可能出现语法不生效的情况。

替代方案 #

其实对于block grid这个组合，你完全可以用更兼容的写法替代——因为display: grid;本身就默认让元素对外表现为块级元素，和display: block grid;的效果完全一致。直接写：

display: grid;

就能在所有支持网格布局的浏览器中生效，包括旧版本Chrome。

内容的提问来源于stack exchange，提问作者Benjamin Abdi