minmax()関数を理解する

CSS Gridにおけるminmax()関数は、要素サイズの最小値と最大値を定義することができるCSSです。
普段の業務であまり「display: grid;」を使用する頻度はあまり高くないのですが、使用することはあるので
今日はこのminmax()の使い方を整理しておこうと思います。

ちなみに…私個人としてはこのminmax()関数、すごく便利だと思ってます。
みなさんにもどんなに便利かを知ってもらえたらうれしいです。

minmax(min, max)の定義は下記のようになります。

.block {
  display: grid;
  grid-template-columns: minmax(min, max) minmax(min, max) minmax(min, max);
}

上記のような形で「最小（min）以上および最大（max）以下」のサイズを定義できます。

例えば3カラムのグリッドがあるばあい、同じサイズに区切るには下記のように設定します。

.block {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(200px, 1fr) minmax(200px, 1fr);
}

See the Pen minmax() by sayuri (@giraffeweb) on CodePen.light

ただこの場合レスポンシブには対応してません。
単純に上記を実装するならdisplay: flex;がよいと思います。

ではどんな時に使用するのか？

例えば、以下のような場合。
1つ目のブロックは最小300～600px、それ以降のブロックはあまりの幅で等幅に振ってね！ということで
「1fr」を設定してます。

.block {
  display: grid;
  grid-template-columns: minmax(300px, 600px) 1fr 1fr;
}

See the Pen minmax()2 by sayuri (@giraffeweb) on CodePen.light

ちなみに…

minmax(min,max)のminの値がmaxの値より大きい場合はminの値のみ有効になります。
基本的には小→大の順で書くようにしましょう。

minmax()でレスポンシブ対応のカードデザインを作成してみましょう！

See the Pen minmax()3 by sayuri (@giraffeweb) on CodePen.light

.box {
  display: grid;
 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-gap: 1rem;
}

さくっと実装できましたね！
みなさんもdisplay:gridを使用する機会があればぜひ試してみてください！

P.S.
中途半端なブログの内容になってしまいました…
もう少し知識が増え次第、この記事はバージョンアップしていきます！

Creator Note