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」。