CSSグリッドの概念と、簡単なタイル型レイアウトの実装を紹介します。
Contents
タイルレイアウトとは？
Webサイトにおけるタイル型レイアウトとは、図のように、要素がタイルのように並べられたレイアウトのことを言います。
CSSグリッドという機能を使えば、様々な要素を、お風呂のタイルのように並べることができます。
タイルレイアウトといえば、写真のギャラリーが一番わかりやすいですね。有名なPinterestというSNSを見れば、タイルレイアウトのイメージが掴みやすいと思います。
参考サイト：Pinterest
CSSグリッドの基本概念
CSSグリッドとは、タイル型レイアウトを実現するためのCSSの機能です。
この機能を使えば、子要素を親要素に対してタイルの様に並べることが可能になります。
CSSグリッドの概念で抑えたいポイントは次の通りです。
- タイルが子要素（グリッドアイテム）であり、それぞれのタイルを一つの親要素（グリッドコンテナ）で囲む。
- グリッドアイテム同士の間隔をグリッドギャップという
CSSグリッドを適応する方法は、次の3つの手順を踏みます
- 並べたい複数の要素をひとつの親要素で囲む
- その親要素に対してdisplay: grid;というCSSを指定
- グリッドレイアウトを調整するCSSを記述
それでは具体的にみていきましょう。
CSSグリッドの使い方
CSSグリッドでタイル型レイアウトを作る手順を説明します。
- グリッドアイテムをグリッドコンテナで囲む
- グリッドコンテナに対してdisplayプロパティの値をgridとする
- グリッドコンテナに縦、横、グリッドギャップに関する指定を書く
まずは例を見てみましょう。
See the Pen dyMBKjd by M2RnRT (@m2rnrt) on CodePen.
CSSの記述を見てみてください。親要素にdisplay: grid;と指定されています。これは、「子要素をCSSグリッドで並べます」という意味です。
親要素に対してdisplay: grid;を指定しただけでは、
上から下に向かって、隙間なく子要素が並ぶだけです。
ここで、何行何列のグリッドにするのか指定するために、親要素に対して二つのCSSプロパティを指定する必要があります。
grid-template-columns:; //列の数と幅を指定できる
grid-template-rows:; //行の数と幅を指定できるまた、子要素同士の幅を指定するために、gapプロパティも合わせて使うと良いでしょう。
gap:; //グリッドアイテム同士の隙間の幅を指定それでは詳しくみていきましょう。
grid-template-columnsプロパティの使い方
grid-template-columnsプロパティに対しては、複数の値を指定します。
次のような特徴があります。
- 親要素に指定
- 指定した数値の数が列の数を決める
- 指定した数値が列の幅を決める
図では、300pxという値を3つ指定しているので、300pxの幅の子要素が横に三つ並びます。
数値として指定できるのは、px, %, rem, frなどです。
ところで、タイルレイアウトを作る上で、frという値は非常に便利です。
grid-template-columns: 1fr 1fr 1fr;と指定すれば、列の幅が、「1 : 1 : 1」の比率になります。
これは非常に便利な機能で、画面幅が変わっても自動でそれに対応して、常に 1:1:1を保ってくれます。
px値で指定してしまうと子要素の幅が固定されてしまい、画面幅が小さくなると、右端から見切れてしまいます。
最近は、いろんな画面はばのデバイスがあるので、ピクセル値で幅を固定するよりも、比率で指定した方が整ったレイアウトになります。
grid-template-rowsプロパティの使い方
grid-template-columnsと同じです。グリッドアイテムの高さと列の数を指定します。
grid-template-rows: 200px, 200px; //列の数と幅を指定例えば、このように指定すれば、縦幅が200pxの子要素が2列並べることができます。
＊ただし、並べたい子要素の数がたくさんあったり、縦幅を指定すると写真などの比率がおかしくなってしまう場合もあります。そんな時は、grid-template-rowは指定しないでおきましょう。
gapプロパティの指定
gapプロパティには、一つの数値を指定できます。そうすることで、グリッドアイテム同士の縦横の隙間の幅を指定できます。
gap: 20px;とすると、グリッドアイテム同士の隙間が20pxになります。
タイル型レイアウトのまとめ
最後に、最初に紹介したコードをもう一度確認して、基本的な概念をおさらいしてみます。
See the Pen dyMBKjd by M2RnRT (@m2rnrt) on CodePen.
また、こちらの記事では、CSSグリッドの応用的な使い方を紹介しています。ぜひ覗いてみてください。
“>CSSグリッドの応用的な使い方1冊ですべて身につくHTML ＆ CSSとWebデザイン入門講座」を参考にしました。これからWebサイト作成を学ぶ人にとってベストな一冊になること間違いありません。
当サイトも完全にオリジナルですが、この本に大変助けられました。
