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" の代わりに "B CはD" です。