【知らなきゃ損】CSSグリッドの応用的使い方

CSSグリッドの応用的な使い方について解説します。
この記事を読めば、次のようなことができるようになります。

特定の子要素だけを大きく表示して、強弱のあるタイル型レイアウトを実現する
レスポンシブ対応を簡単に実現する
短く、クールにCSSグリッドのコードを書けるようになる

CSSグリッドって何？という方は、こちらの記事を参考にしてみてください。

https://doku-pro.com/?p=294

CSSグリッドという機能を使えば、タイル型のレイアウトが簡単に実装できるということでした。

並べたい子要素たち(グリッドアイテム）を親要素（グリッドコンテナ）で囲み、グリッドのCSSを書けば、簡単にお風呂のタイルみたいなレイアウトが完成します。

これを応用すれば、一つ目の要素だけ大きく表示するなど、思い通りのカスタマイズが可能になります。
また、レスポンシブに対応させるのも、技を少々覚えてしまえばいとも簡単です。

それではCSSグリッドの達人になるためのジャーニーへ！

Contents

1 一部のグリッドアイテムを大きく表示する方法
- 1.1 具体的なCSSコード
2 グリッドをレスポンシブ化
- 2.1 最大/最小のサイズを決めるminimax
- 2.2 auto-fitで列の数を自動化
3 CSSグリッド・応用まとめ

一部のグリッドアイテムを大きく表示する方法

図の様に、一つだけ大きいタイルを作るためにはどのようにすればよいのでしょう？

実は、CSSグリッドには、縦のラインに番号が振ってあります。なので、特定の要素に対して「何番から何番まで」とCSSで指定してあげることで、一つだけ大きいタイルを作ることができます。

それには、大きくしたいの子要素に対してgrid-columnプロパティとgrid-rowプロパティを指定する必要があります。

具体的なCSSコード

それでは具体例を見てみましょう。

See the Pen VwaoagX by M2RnRT (@m2rnrt) on CodePen.

grid-itemというクラスのdiv要素が13個あります。CSSを見るとgrid-item:nth-child(2)というCSSセレクタがありますが、これは、「grid-itemというクラスのうち、2番目のものに対して」という意味になります。これは便利なので覚えておくと便利です。
また、repeat(4, 1fr)というのは「1fr 1fr 1fr 1fr」と同じ意味で、コードを簡潔にするためのCSSの機能の一つです。（frって何？という方はこちらの記事に書いてあります。）

さて、ここからが本題です。特定の要素だけ大きく表示するには、子要素に対して、二つのCSSプロパティを指定する必要があります。

grid-column・・・横幅の大きさを指定
grid-row・・・縦幅の高さを指定

これらのプロパティに指定する値として、二つの数字をスラッシュで区切って書きます。例えば、grid-column: 1 / 3;とすると、「横幅を1行目から3行目までのサイズにする」という意味になります。

.grid-item:nth-child(２) {
    grid-column: 2/4;
    grid-row: 1/3;
}

例では上のようなコードになっています。grid-itemというクラスの二番目の要素に対して、横幅が２列目から３列目まで、縦幅が１列目から３列目までの大きさにする、という意味です。

グリッドをレスポンシブ化

「レスポンシブ」とは、画面の幅のサイズに合わせてレイアウトが変わるようにすることです。かつてのネットユーザーはパソコンがほとんどでしたが、今ではスマホのほうが多く使用されています。ですので、小さい画面になった時は、それに合わせて１列のギャラリーになれば、コンテンツが大きく表示されて見やすいレイアウトになります。

必要な知識は以下の２つだけです。

minimaxの使い方
auto-fitの使い方

最大/最小のサイズを決めるminimax

minimax(最小値、最大値)というものを指定すれば、子要素がこれ以上小さくならない値を指定できます。

例えば、grid-template-columns: repeat(3, 1fr));というCSSプロパティを指定すれば、どこまで画面サイズが小さくなっても３列が1:1:1の大きさをキープします。

しかし、grid-template-columns: repeat(3, minimax(240px, 1fr);とすれば、子要素の幅が240px以上小さくならなくなります。

ただ、これでは画面からはみ出てしまい、見栄えが良くないばかりか使い勝手が悪くなってしまいます。そこで登場するのがauto-fitです。

auto-fitで列の数を自動化

先ほどは、grid-template-columns: repeat(3, minimax(240px, 1fr));とすることで、縦の列を３列に固定していましたが、それではminimaxを適応した時に画面から切れてしまう現象が起きます。
そこで、列の数を指定するのではなく、auto-fitとすることで画面サイズが切れないように自動で調整してくれます。

grid-template-columns: repeat(auto-fit, minimax(240, 1fr));としてください。