[css]display:grid;@gridレイアウトーその３：【grid-template-areas】ー
最終更新日：2021.10.01 [金] 公開日：2020.08.25 [火] カテゴリー：html・CSS・JS備忘
直感的にわかりやすい、2次元レイアウトのグリッドレイアウト。
かなり奥が深くて、私自身まだかなり手探りなのですが、ちょっとずつ自分の学習のためにもまとめてみようと思います。
そんな中でも、特に直感的に配置できるgrid-template-areasについて、自分的まとめ。
grid-template-areas：図解
図のように、grid-template-areasは直感的に、、、というか並べる順に設定できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<style> .wrap1{ display: grid; grid-template-columns: 200px 400px; grid-template-rows: 200px 200px; grid-template-areas: "A B" "A C";} .box_1{ background-color:#ff6600; grid-area: A;/*ここでgrid-template-areasで配置する名前を宣言*/ } .box_2{ background-color:#ffcc00; grid-area: B;/*ここでgrid-template-areasで配置する名前を宣言*/ } .box_3{ background-color:#ff0000; grid-area: C;/*ここでgrid-template-areasで配置する名前を宣言*/ } </style> <div class="wrap1"> <div class="box_1">A</div> <div class="box_2">B</div> <div class="box_1">A</div> <div class="box_3">C</div> </div> |
上記のように設定すると以下のように表示されます。
A
B
A
C
まとめ
grid-template-areas
エリアの並び順、エリアの名前を決定。
ex）
grid-template-areas:
“A B”
“A C”;
ここで割り振った名前がそのままそのスペースの名前となる。
grid-area
エリアの名前をスタイルシートないで宣言して、スタイルを当てる。
.box_1{
background-color:#ff6600;
grid-area: A;
コメントを残す