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>