[css]display:grid;@gridレイアウトーその3:【grid-template-areas】ー

最終更新日:2021.10.01 [金] 公開日:2020.08.25 [火] カテゴリー:html・CSS・JS備忘

Pocket
Facebook にシェア
LINEで送る

直感的にわかりやすい、2次元レイアウトのグリッドレイアウト。

かなり奥が深くて、私自身まだかなり手探りなのですが、ちょっとずつ自分の学習のためにもまとめてみようと思います。

そんな中でも、特に直感的に配置できるgrid-template-areasについて、自分的まとめ。



grid-template-areas:図解

図のように、grid-template-areasは直感的に、、、というか並べる順に設定できます。

上記のように設定すると以下のように表示されます。

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;



スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA