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

CSSグリッド

スポンサーリンク

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

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

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

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

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

CSSグリッド
タイル型レイアウト

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

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

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

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

CSSグリッド
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プロパティを指定する必要があります。

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

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

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

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

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

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

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

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

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

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

CSSグリッド minimax
minimaxの指定

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

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

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

auto-fitで列の数を自動化

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

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

CSSグリッド・応用まとめ

本記事のポイントは、CSSグリッドの応用的な使い方でした。(基本を押さえるにはこちらの記事を参考にしてみてください。)

  • 子要素にプロパティを書くことで、特定のものだけ大きく表示
  • repeat()とminimax()を使えば、より高度なコーディングができる
  • レスポンシブ対応はauto-fitを書くだけ

というのが、本記事のミソです。

スポンサーリンク