grid-template …… グリッドトラックのリストについてまとめて指定する







広告
grid-templateプロパティは、グリッドトラックのリストについてまとめて指定する際に使用します。
grid-templateプロパティで指定できるのは、
grid-template-rows・
grid-template-columns・
grid-template-areas
の値です。
grid-template-rowsプロパティ
と
grid-template-columnsプロパティ
の値は半角スラッシュ( / )区切りで記述します。
また、これらの値と
grid-template-areasプロパティ
の値は半角スペースでつなぎます。
■値
- none
- grid-template-rows・ grid-template-columns・ grid-template-areas の初期値 none と同じ(初期値)
- grid-template-rowsの値 / grid-template-columnsの値
- grid-template-rows と grid-template-columns の値は、半角スラッシュ( / )区切りで記述
- grid-template-areasの値
- grid-template-areasの値は、grid-template-rowsの値やgrid-template-columnsの値と半角スペースでつないで記述
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- グリッドコンテナ
- 値の継承
- しない
grid-template-rows・ grid-template-columns の値をまとめて記述する
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;
■使用例1
CSSソースは外部ファイル(sample.css)に記述
div.sample1 { display: grid; grid-template: 80px 100px 40px / 50px 100px 40px; } div.sample1 div { margin:4px; border-radius:4px; background-color:#66cc99; }
HTMLソース
<div class="sample1"> <div>一</div> <div>ニ</div> <div>三</div> <div>四</div> <div>五</div> <div>六</div> <div>七</div> <div>八</div> <div>九</div> </div>
↓↓↓
ブラウザ上の表示
一
ニ
三
四
五
六
七
八
九
grid-template-rows・ grid-template-columns・ grid-template-areas の値をまとめて記述する
以下の指定は……
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;
■使用例2
CSSソースは外部ファイル(sample.css)に記述
#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;}
HTMLソース
<section id="sample1"> <header>上</header> <nav>右</nav> <main>左</main> <footer>下</footer> </section>
↓↓↓
ブラウザ上の表示
広告