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

最終更新日：2022.05.23 [月]　公開日：2020.08.25 [火]　カテゴリー：html・CSS・jQuery・JS備忘

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

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

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

Contents

grid-template-areas：図解

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

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

エリアの並び順、エリアの名前を決定。
ex）
grid-template-areas:
“A B”
“A C”;
ここで割り振った名前がそのままそのスペースの名前となる。

エリアの名前をスタイルシートないで宣言して、スタイルを当てる。

.box_1{
background-color:#ff6600;
grid-area: A;

コメントを投稿するにはログインしてください。