Step By Work

大阪のホームページ制作会社

複雑なレイアウトもgrid-template-areasを使えば1分でできる!レスポンシブにもオススメ

Date: 2023.12.13
Update: 2024.01.05

執筆・監修

上杉 洋 Hiroshi Uesugi

1991年生まれ。 株式会社ステップバイワーク代表。 2013年に株式会社n.uを設立。 2015年にStep by workとして独立。 2021年株式会社ステップバイワークとして法人化。 HP制作/SEO対策/コンテンツ制作/動画制作/YouTube運用/写真撮/WordPressを全て一人でやります。

CSS Grid Layoutを使ってサイズの違う複数のブロックを並べて組み合わせたレイアウトを作る場合はgrid-template-areasがオススメです

上杉

grid-template-areasをオンラインツールのLayoutit!で生成すれば下の画像のレイアウトが1分で作れます!

複雑なレイアウトもgrid-template-areasを使えば楽
.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コードを生成できるオンラインツールです。

https://grid.layoutit.com/

複雑なレイアウトをgridで実装してみた動画

もちろんgridの中にサブグリッドを作成して入れ子にすることも可能です

grid-template-areasを使えばレスポンシブも楽になる

gridで複雑なレイアウトを作ることで子要素が全て兄弟要素となるので、スマホで縦積みにしたい場合でも要素の順番を自由に入れ替えることができるのでレスポンシブ対応が楽になるというメリットがあります。

動画でも話しました!

この記事へのコメント 0件