はじめに
dipアドベントカレンダー9日目の記事です！
某カ●ディで毎日お菓子が出てくるリアルアドベントカレンダーを買おうと思ったら売り切れてました・・・😢
アドベントカレンダーがないなら作ればいいじゃない。ということでCSSのグリッドレイアウトについて紹介しながらアドベントカレンダー風デザインのサンプルコードを書いてみようと思います！
なお、サンプルに使用している画像はCanvaの生成AIを、物語はChatGPT3.5を利用しました。
まずは作ったものを・・・
まずはグリッドレイアウトを利用して作ったアドベントカレンダーをご覧ください🎉
各日付のカードをめくると物語が読める仕掛けになっています。
See the Pen Untitled by Furusawa (@e-furusawa) on CodePen.
グリッドレイアウトとは何か
グリッドレイアウトは格子状に分割したレイアウトに要素を配置するためのCSSの機能です。
元々はグリッドシステムというデザイン手法をCSSでも扱えるようにしたものではないかと理解しています。
サンプルに示したデザインでは、おそらくフレックスボックスでも実現できるのではないかと思います。
しかし今年主要なブラウザで利用可能となったsubgridを利用することで、フレックスボックスでは実現できなかった柔軟なレイアウトが可能となりました。
グリッドレイアウトを子要素にも適用することで、子要素同士でレイアウトを合わせることが簡単になりました(参考)
JavaScriptで計算せずとも子要素内のグリッドアイテムの高さを隣接する子要素同士で合わせる事ができるのはグリッドレイアウトならではです。
グリッドレイアウトにまつわるプロパティの概要
私はもともとdisplay:flexの申し子(自称)だったんですが、今回サンプルのコードを書くにあたりプロパティの多さとその理解に苦しみました。
苦しみの先にいいデザインといいコードは生まれると思うのでめげずに今後もグリッドレイアウトにチャレンジしていきます。
今後再度苦しむことになるであろう未来の私に向けてグリッドレイアウトにまつわるプロパティの概要を纏めようと思います。
グリッドコンテナの定義に利用するプロパティ
-
grid
- すべてのグリッドプロパティを設定するためのショートハンド
-
grid-template
- グリッド構造とその行数と列数を定義する
-
grid-template-areas
- 名前付きのグリッドエリアを定義する
-
grid-template-columns
- グリッド内の列のサイズを設定する。ここでsubgridを指定すると、親要素の列のサイズから取得される。
-
grid-template-rows
- グリッド内の行のサイズを設定する。ここでsubgridを指定すると、親要素の行のサイズから取得される。
グリッドアイテムの配置に利用するプロパティ
-
grid-area
- グリッドアイテムに名前を割り当て、グリッド配置関連のプロパティで参照できるようにする
-
grid-column
- グリッド内でアイテムの列の配置を決定するショートハンド
-
grid-column-start
- グリッドアイテムの列の開始位置を定義する
-
grid-column-end
- グリッドアイテムの列の終了位置を定義する
-
grid-row
- グリッド内でアイテムの行の配置を決定するショートハンド
-
grid-row-start
- グリッドアイテムの行の開始位置を定義する
-
grid-row-end
- グリッドアイテムの行の終了位置を定義する
自動配置に利用するプロパティ
-
grid-auto-columns
- 明示的に定義されていない列のサイズを設定する
-
grid-auto-rows
- 明示的に定義されていない行のサイズを設定する
-
grid-auto-flow
- グリッド内の自動配置されるアイテムの位置を指定する
最後に
グリッドレイアウトに慣れると、漫画みたいなレイアウトやアイテムの多いポスターのようなレイアウトでも自由に柔軟に組むことができるようになると思います。
初めはグリッド上への配置や入れ子にした場合のグリッドの理解など難しいところもありますが、どんなレイアウトでもかかってこいなつよつよマークアップエンジニア(?)を目指して皆さんもぜひチャレンジしてみてください！