複雑なレイアウトもgrid-template-areasを使えば1分でできる！レスポンシブにもオススメ
| Date: | 2023.12.13 |
|---|---|
| Update: | 2024.01.05 |
執筆･監修
Xにポストする
Facebookで共有
コピーするCSS Grid Layoutを使ってサイズの違う複数のブロックを並べて組み合わせたレイアウトを作る場合はgrid-template-areasがオススメです
grid-template-areasをオンラインツールのLayoutit!で生成すれば下の画像のレイアウトが1分で作れます！
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
gap: 0px 0px;
grid-template-areas:
"a b c d d d"
"a e e f f f"
"a h h j j j"
"a i i k k l"
"g i i k k l"
"m m m m m m";
}
.b { grid-area: b; }
.c { grid-area: c; }
.d { grid-area: d; }
.e { grid-area: e; }
.f { grid-area: f; }
.a { grid-area: a; }
.g { grid-area: g; }
.h { grid-area: h; }
.i { grid-area: i; }
.j { grid-area: j; }
.k { grid-area: k; }
.l { grid-area: l; }
.m { grid-area: m; }Layoutit!はブラウザで複雑なgridレイアウトのCSSコードを生成できるオンラインツールです。
もちろんgridの中にサブグリッドを作成して入れ子にすることも可能です
grid-template-areasを使えばレスポンシブも楽になる
gridで複雑なレイアウトを作ることで子要素が全て兄弟要素となるので、スマホで縦積みにしたい場合でも要素の順番を自由に入れ替えることができるのでレスポンシブ対応が楽になるというメリットがあります。
←Twitterもコツコツと更新してるのでよければフォローを、、、
この記事へのコメント 0件