CSSのグリッドレイアウトとは？
初回はグリッドレイアウトとは何なのか？どういったレイアウトなのかについて解説していきます。
一言でいうと
「格子状に要素を配置していくレイアウト」
です。
当フロントグラムの記事一覧ページはグリッドレイアウトを使っており以下のようにグリッドで区切りっています。
これだと良く分からないと思うので、図を用いて説明します。この記事では概要のみになるので、具体的な記述方法が知りたい方は次の記事をご覧ください。
グリッド図を用いて要素を配置
まずは説明のためにグリッド（格子）を用意します。4×4のグリッドにしました。
この4×4のグリッドに要素（ヘッダーとかサイドバーとか）を配置していきます。
今回はヘッダー、メイン、サイドバー、フッターがあるような「ごくシンプルなレイアウト」を考えましょう。
これを先程の4×4のグリッドに当てはめると以下のようになります。
それぞれの要素を見ていくと
- ヘッダー = 1×4のグリッド
- メイン = 2×3のグリッド
- サイドバー = 2×1のグリッド
- フッター = 1×4のグリッド
という風に区切られているのがわかるかと思います。グリッドレイアウトはこのようにして、先に〇〇×〇〇のグリッドに分けておき、
そこに対して、書く要素をどのくらいの割合で配置していくのかという仕組みになっています。
縦・横どのくらいのグリッドを取るかは自分次第なので、そのグリッド上で好きなところに、好きなグリッドの数分要素を配置することで以下のように柔軟にレイアウト作成することができます。
今回は4×4のグリッドで説明しましたが、このグリッドの数を増やしてもっと多くのレイアウトを表現することも可能です。
例えば雑誌のようなレイアウトや写真集のようなレイアウトなど。
次回は、「CSS Grid Layout」で出てくる用語と簡単な記述方法について見ていきます。