CSS网格 - 网格模板区域行为

Question

我有一个网格模板区域定义的CSS网格。有人能告诉我为什么下面的模板不起作用吗？我期望看到等分的4x3网格。我有一个小提琴演示会发生什么，以及为可以工作的网格注释掉样式。我无法破译2之间的区别，以及为什么会出现这种情况。谢谢。 Fiddle

.container { 
    display: grid; 
    width: 100%; 
    height: 100%; 
    grid-template-areas: "a b c d" 
         "b c d a" 
         "a b c d"; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr; 
} 

.container > header { 
    grid-area: a; 
} 

.container > nav { 
    grid-area: b; 
} 

.container > main { 
    grid-area: c; 
} 

.container > footer { 
    grid-area: d; 
} 

---

<div class="container"> 
    <header><h1>A</h1></header> 
    <nav><h1>B</h1></nav> 
    <main><h1>C</h1></main> 
    <footer><h1>D</h1></footer> 
</div> 

Answer 1

第二行是 “B）（V d一个” 而不是 “A B C d”。