CSS网格不接受网格模板区域

Question

.hero_grid{
      display: grid;
      grid-template-columns: 42.5fr 10fr 7.5fr 15fr 25fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas: 'titlehero filterhero filterhero filterhero filterhero' 'titlehero . categorieshero categorieshero categorieshero' 'titlehero . . categorieshero categorieshero' 'titlehero . . . categorieshero';
}

产生以下结果：

（在这种情况下，标题位于筛选英雄的后面）

在这种情况下，标题位于filterhero的后面我检查了元素，发现浏览器未接受我的grid-template-area。有谁碰巧知道为什么会这样？

谢谢。