grid-template-areas …… 名前付きグリッド領域を指定する
広告
grid-template-areasプロパティは、名前付きグリッド領域を指定する際に使用します。
■値
- none
- グリッド名を指定しない（初期値）
- トラックリスト
- グリッド名を半角スペース区切りにして、トラックリストを指定する
■初期値・適用対象・値の継承
- 初期値
- none
- 適用対象
- グリッドコンテナ
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
#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;}
HTMLソース
<section id="sample1"> <header>上</header> <nav>右</nav> <main>左</main> <footer>下</footer> </section>
↓↓↓
ブラウザ上の表示
広告