minmax関数の使い方

minmax関数は、最大・最小値の値を設定する事で自動で伸縮させることができる機能です。
基本的な記述例としては下記サンプルをご参照ください。

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

display属性に「grid」を指定し、grid-template-columnsを利用しminmax()を指定します。
上記の場合、最小値は100px、最大値に300pxを指定してあります。

今回、この関数だけに利用できる新たな単位。fr単位が誕生したそうです。
※fr単位は、「flexible length」の意味らしいですがflではない事に注意してください。

fr単位を指定すると、フレックスボックス（display:flex;）と同様に要素の幅を埋めるように幅を自動調整してくれます。

columnsとあるように、ここでは要素の数だけ幅を指定してあげる必要があります。上記サンプルでは、3つ分の指定がしてあり、1つ目の要素にminmax(100px, 300px)、２つ目と３つ目の要素に1frを指定してあります。

この1frをpxや%に変えてみると、指定幅に従った幅に調整されます。

上記を適用した場合のサンプルはこちら。

See the Pen css:display_grid_01 by qurimuk (@qurimuk) on CodePen.0

ちなみに下記は2つ目の要素にpxで指定した場合のサンプルです。
利用シーンは少ないと思われますが、指定要素だけpxという形も可能です。

See the Pen css:display_grid_02 by qurimuk (@qurimuk) on CodePen.0

 

全要素に適用するrepeat()

これまでの方法だと要素が少なかったり同幅でない場合には、利用価値が薄く感じられます。（個人的に）また、要素分の指定をしなければなりません。

今回登場したgridはrepeat()という関数があり、この関数を利用する事で複数の要素に自動で適用させることが可能になります。

このrepeat()関数には、auto-fitという親要素の領域幅に合わせて自動でカラム数を調整してくれるプロパティのようなものが存在し、この2つを組み合わせる事でメディアクエリを利用せずにレスポンシブ対応のコンテンツを作ることができます。

下記は、repeat関数とauto-fitを利用したサンプルになります。

See the Pen css:display_grid by qurimuk (@qurimuk) on CodePen.0

flex？grid?

余談ですが、flexボックスを利用して同様の動きをさせようとすると、下記のような形になります。実際に描いてみると確かに楽ではありますね。

使い所ややりたい事に合わせて選べるようになってきました。

See the Pen css:display_flex by qurimuk (@qurimuk) on CodePen.0

Similar Posts