grid-templateプロパティは、グリッドトラックのリストについてまとめて指定する際に使用します。
grid-templateプロパティで指定できるのは、
grid-template-rows・
grid-template-columns・
grid-template-areas
の値です。
grid-template-rowsプロパティ
と
grid-template-columnsプロパティ
の値は半角スラッシュ（ / ）区切りで記述します。
また、これらの値と
grid-template-areasプロパティ
の値は半角スペースでつなぎます。
grid-template-rows: 80px 100px 40px; grid-template-columns: 50px 100px 40px;
上記の指定は、以下と同じです。
以下では grid-templateプロパティを使用して、
grid-template-rows と
grid-template-columnsプロパティの指定を一つにまとめています。
grid-template: 80px 100px 40px / 50px 100px 40px;
div.sample1 {
display: grid;
grid-template: 80px 100px 40px / 50px 100px 40px;
}
div.sample1 div {
margin:4px; border-radius:4px;
background-color:#66cc99;
}
<div class="sample1"> <div>一</div> <div>ニ</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> <div>七</div> <div>八</div> <div>九</div> </div>
以下の指定は……
grid-template-areas: "ue ue"
"hidari migi"
"shita shita";
grid-template-rows: 80px 1fr 50px;
grid-template-columns: 100px 1fr;
以下と同じです。
grid-template: "ue ue" 80px
"hidari migi" 1fr
"shita shita" 50px
/ 100px 1fr;
#sample2 {
display: grid;
width: 100%;
grid-template: "ue ue" 80px
"hidari migi" 1fr
"shita shita" 50px
/ 100px 1fr;
}
#sample2 > header {grid-area:ue; background-color:orange;}
#sample2 > nav {grid-area:hidari; background-color:skyblue;}
#sample2 > main {grid-area:migi; background-color:palegreen;}
#sample2 > footer {grid-area:shita; background-color:pink;}
<section id="sample1"> <header>上</header> <nav>右</nav> <main>左</main> <footer>下</footer> </section>