[css]display:grid;@gridレイアウトーその3:【grid-template-areas】ー
最終更新日:2022.05.23 [月] 公開日:2020.08.25 [火] カテゴリー:html・CSS・jQuery・JS備忘
直感的にわかりやすい、2次元レイアウトのグリッドレイアウト。
かなり奥が深くて、私自身まだかなり手探りなのですが、ちょっとずつ自分の学習のためにもまとめてみようと思います。
そんな中でも、特に直感的に配置できるgrid-template-areasについて、自分的まとめ。
grid-template-areas:図解

図のように、grid-template-areasは直感的に、、、というか並べる順に設定できます。
ABAC
上記のように設定すると以下のように表示されます。
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;
コメントを残す
コメントを投稿するにはログインしてください。