grid-template-areasプロパティは、名前付きグリッド領域を指定する際に使用します。
#sample1 { display: grid; width: 100%; grid-template-areas: "ue ue" "hidari migi" "shita shita"; grid-template-rows: 80px 1fr 50px; grid-template-columns: 100px 1fr; } #sample1 > header {grid-area:ue; background-color:orange;} #sample1 > nav {grid-area:hidari; background-color:skyblue;} #sample1 > main {grid-area:migi; background-color:palegreen;} #sample1 > footer {grid-area:shita; background-color:pink;}
<section id="sample1"> <header>上</header> <nav>右</nav> <main>左</main> <footer>下</footer> </section>