【CSS Modules】minmax()関数の使い方
minmax()関数の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
minmax()関数は、CSS Gridレイアウトにおいて、グリッドコンテナの列（カラム）や行（ロー）のサイズを定義するために使用される関数です。具体的には、minmax(最小サイズ, 最大サイズ)の形式で記述し、特定のトラックが取り得る幅（または高さ）の最小値と最大値を設定します。
この関数を使用することで、グリッドの列や行が、利用可能なスペースやその内部のコンテンツ量に応じて、柔軟にサイズを調整できるようになります。例えば、minmax(100px, 1fr)と指定した場合、その列は最低100ピクセルの幅を確保しつつ、利用可能な残りのスペースを均等に分配されるようになります。
引数である「最小サイズ」には、トラックが小さくなることができる下限のサイズを指定します。一方、「最大サイズ」には、トラックが大きくなることができる上限のサイズを指定します。これらの値には、pxやemなどの絶対的な長さ、%のような相対的な長さ、fr（flex単位）、そしてmin-content、max-content、autoといったキーワードを使用できます。min-contentはコンテンツが溢れない最小限の幅を、max-contentはコンテンツがすべて収まる最大限の幅をそれぞれ表します。autoは利用可能なスペースとコンテンツのサイズに基づいて自動的に調整されることを意味します。
注意点として、もし最小サイズが最大サイズよりも大きい値を指定された場合、最大サイズは無視され、最小サイズの値がトラックの最終的なサイズとなります。
minmax()関数は、特にレスポンシブデザインにおいて、様々な画面サイズやコンテンツ量に対応する柔軟で適応性の高いグリッドレイアウトを構築する際に非常に有効な機能です。
構文(syntax)
1.grid-container { 2 grid-template-columns: minmax(100px, 1fr); 3}
引数(parameters)
min: <track-size>, max: <track-size>
- min: <track-size>: トラックの最小サイズを指定します。
- max: <track-size>: トラックの最大サイズを指定します。
戻り値(return)
CSS <track-size>
minmax() 関数は、指定された範囲内の最小値と最大値に基づいて、トラック（グリッドレイアウトの列または行）のサイズを決定します。これにより、柔軟なレイアウトを作成できます。