【CSS Gridの使い方】駆け出しエンジニア向けの便利な関数を解説！
こんにちは！
個人のXアカウントを開設してから早5ヶ月…あまり有益な更新をしてないシモジョーです！
（ご興味ある方はぜひ覗いてみてください！！）
今回は、グリッドレイアウトの知っておくと便利な実装テクニックをご紹介いたします。
グリッドレイアウトは見た目から統一感があり、一度にたくさんの情報を見ることができるレイアウトのことをいいます。
グリッドレイアウトには便利なプロパティや関数がたくさんあり、全てを1つの記事にすることは難しいので、今回私が特に便利だと思った関数やその使い方を紹介していきたいと思います！
この記事を読んでくださった方々のWeb制作に少しでも役に立てますと幸いです〜！
グリッドレイアウトの簡単なおさらい
前回グリッドレイアウトの基本から実装方法、便利なツールまでをご紹介しました。
もしまだ読んでない方やグリッドレイアウトの基礎知識について振り返りたい方は是非こちらの記事を読んでみてください！
それでは、簡単にグリッドレイアウトの基本的な知識を振り返っていきたいと思います。
グリッドレイアウトとは、
手法を指します。
また、グリッドレイアウトを構築していく時の流れとしては以下の通りです。
- 親要素にdisplay: grid;を指定する。
- 親要素をグリッドコンテナとして行と列を指定する。
- 子要素のグリッドアイテムをどこに配置するのかをグリッドエリアに指定する。
このような流れでグリッドレイアウトを簡単に実装することができます。
そして今回は、グリッドレイアウトを実装していく上で使える特に便利なものをまとめてみました！
グリッドレイアウトの知ってると便利なプロパティや関数についてご紹介
それでは、知っていると便利で実装時に使えるテクニックをいくつかご紹介します！
紹介する内容としては、以下の通りです！
- grid-auto-rows / grid-auto-columnsについて
- minmax関数について
- repeat関数について
– auto-fill & auto-fitの組み合わせ
– minmax関数、auto-fill & auto-fitの組み合わせ
grid-auto-rows / grid-auto-columnsについて
グリッドレイアウトには行や列を指定するプロパティgrid-template-rowsやgrid-template-columnsの他に、grid-auto-rowsやgrid-auto-columnsがあります。
このプロパティは、グリッドコンテナに収まらずに出た行や列の大きさを暗黙的にコンテナ内と同じ大きさに保ってくれるという優れものです。
grid-template-rows: 100px;
grid-auto-rows: 100px;
画像から見てわかるように、grid-template-rowsでは2行目以降、行の大きさを指定していないので2行目以降の大きさはグリッドアイテムの大きさになります。
しかしgrid-auto-rowsでは、1行分しか指定していないにも関わらず2行目以降も100pxと同じ大きさを保っていることがわかります。
このようにgrid-auto-rowsは行が増えても1行目と同じ大きさを保持することができる機能を持ちます。
minmax関数について
次にminmax関数を説明します。
minmax関数というのは、コンテンツの幅によって行や列の大きさを最小値以上、最大値以下の幅に柔軟に対応してくれるCSS関数です。
以下のようにコードを記述します。
grid-template-columns: minmax(最小値, 最大値);
それでは、実際に数字を入れてみましょう。
以下の列を指定するコードの場合は、画像のようになります。
grid-template-columns: minmax(100px, 400px);
コンテンツ幅が狭い（400pxを保てない）時は1列目のグリッドアイテムはコンテンツ幅いっぱいの値を保ちますが、100pxよりも小さくなることはありません。
反対に、コンテンツ幅が広がる（400pxを保てる）時のグリッドアイテムは最大値の400pxまで広がります。
また、以下のコードのように値のトラックの一部に指定することも可能です。
grid-template-columns: minmax(100px, 1fr) 200px;
その場合は、以下の画像のようになります。
コンテンツの幅が狭い場合、1列目は最小値100pxとなり、コンテンツ幅が広くなると最大値の1frが推奨されコンテンツ幅によって1列目の大きさは可変します。また、2列目は200pxの幅を保持します。
ここでNG例2点ご紹介します！
// NG例①
grid-template-columns: minmax(400px, 100px);
// NG例②
grid-template-columns: minmax(1fr, 200px);
NG例①のように最大値より最小値の方が大きいと大きい方の数値が反映され、うまくminmax関数として機能しません。
またNG例②のように、最小値に1frを使用すると全体的に反映されません。
このようにminmax関数というのは、レスポンシブ時に使い勝手のいい関数となっているので、注意点に気をつけながらぜひ使ってみてください！！
repeat関数について
次にrepeat関数について説明していきたいと思います。
後半では、repeat関数と他の関数を組み合わせることで、レスポンシブ時に使えるテクニックを紹介しているので、最後までぜひ読んでみてください！
repeat関数というのは、行や列を繰り返す回数とどのくらいの幅かを記述できるCSS関数です。
grid-template-columns: repeat（繰り返す回数, どのくらい幅）;
この関数はコンパクトにまとめて書けるため、効率的かつコードを書くストレスも軽減されます。
repeat関数は以下のように書くことができます。
grid-template-columns: 100px 100px 100px 100px;
// repeat関数で上記のコードを省略可能
grid-template-columns: repeat(4, 100px);
また、値のトラックの一部にも記述可能です。
grid-template-columns: 50px repeat(4, 100px) 150px;
他にも、以下のコードのように1行目は100px、2行目は200pxを2回繰り返すという書き方もできます。
grid-template-rows: repeat(2, 100px 200px);
ここで、repeat関数とともに使えるテクニックを2つ紹介します！
auto-fill と auto-fit
1つ目は、auto-fill と auto-fit です。
このふたつの違いとしては、右側の余白の扱われ方に違いがあります。
特にPCサイズで見たときにその違いがわかりやすいので、PCサイズを想定した形で説明していきたいと思います。
まずauto-fillです。
auto-fillの特徴としては、グリッドアイテムが存在していなくても、空のグリッドアイテムが並べられます。
以下のコードの場合、右側には180pxの空のグリッドアイテムが保たれている状態になります。
grid-template-columns: repeat(auto-fill, 180px);
次にauto-fitです。
auto-fitの特徴としては、右側にスペースがあるとただの余白になります。
以下のコードの場合、右側はただの余白がある状態です。
grid-template-columns: repeat(auto-fit, 180px);
このようにauto-fillとauto-fitを比べると右側に空のグリッドアイテムとして扱われているか余白として扱われるかの違いがあります。
しかし見た目からしてあまり変わらないため、justify-contentプロパティを使って、グリッドアイテムの動きを見ていきましょう。
justify-contentプロパティは、グリッドレイアウト全体の位置を調整できるプロパティです。
今回、justify-content: center;を指定して、中央に配置される状態を見ていきたいと思います。
auto-fillでは右側のスペースは空のグリッドアイテムが確保されているため空のグリッドアイテムも含めて中央に配置されていることがわかります。
それに対し、auto-fitでは右側のスペースは余白として扱われているため、全体的に中央に位置していることがわかります。
このように、justify-content: center; を指定することでauto-fillとauto-fitの余白の扱い方がはっきりわかりました。
明確に幅が固定されていると、柔軟にレスポンシブ対応ができないため、そういう時に使うのがrepeat関数とminmax関数の組み合わせです。
minmax関数にauto-fill や auto-fitの組み合わせ
2つ目は、minmax関数とauto-fill や auto-fitの組み合わせです。
1で説明したものにminmax関数を追加するだけでより使い勝手のいいものになります。
auto-fillを組み合わせた場合、1でも説明したように各トラックは最小幅以上で常に右側に空白ができないように調整されます。
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
auto-fitを組み合わせた場合、コンテンツ幅が狭くなった場合のグリッドアイテムは最小値180pxになりますが、コンテンツ幅が広がっていく場合、最大値1frを指定することで全体にフィットしていくようにグリッドアイテムが広がるように大きさが保たれます。
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
以下のようによくあるレイアウトを用いてグリッドアイテムが1つの場合と3つの場合で、比べてみました。
このように、repeat関数にminmax関数とauto-fill / auto-fitを組み合わせることでどんな時にどちらが使いやすいかイメージしやすくなったのではないでしょうか。
まとめ
今回は、グリッドレイアウトを使った際に使える関数やレスポンシブに柔軟に対応してくれる組み合わせなど知っていると便利なものを説明しました。
グリッドレイアウトをただ実装するだけでなく、こういった組み合わせを使いこなすだけでも色々な幅が広がっていくと思うので、ぜひ使ってみてください！
少しでもグリッドレイアウトを勉強している方の参考になれば嬉しいです。
最後まで読んでいただき、ありがとうございました！！
この記事の執筆者
