CSSグリッドレイアウトminmax（）の使い方
の CSSグリッドレイアウトモジュール を導入することで、レスポンシブデザインを次のレベルに引き上げます。 新しい種類の柔軟性 それは今まで見たことがなかった。今、私たちだけができない カスタムグリッドを定義する 純粋なCSSだけで非常に高速ですが、CSSグリッドにもあります。 多くの隠された宝石 これにより、グリッドをさらに調整して複雑なレイアウトを実現できます。.
の minmax（） 関数 あまり知られていないこれらの機能の1つです。グリッドトラックのサイズを定義することを可能にします 最小から最大の範囲として グリッドが各ユーザーのビューポートに最善の方法で適応できるように.
構文
の構文 minmax（） 機能は比較的単純です、それはかかります 二つの引数最小値と最大値
minmax（最小、最大）
の 分 値 小さくする必要があります より 最大, さもないと 最大 ブラウザに無視される.
我々は使用することができます minmax（） として機能 の値 グリッドテンプレート列 または グリッドテンプレート行 財産（またはその両方）. 私たちの例では、前者を使います。.
.コンテナ表示：グリッド; grid-template-columns：minmax（100ピクセル、200ピクセル）1fr 1fr; grid-template-rows：100ピクセル100ピクセル100ピクセル。グリッドギャップ：10px。
以下のCodepenデモでは、 HTMLとCSSのコード 記事全体を通して使用します.
使用できます 異なる種類の値 の中 minmax（） 機能は、すべて私たちが作成したいカスタムグリッドの種類によって異なります.
静的長さの値
基本的な使い方は2つあります。 minmax（） との機能 静的な長さの値.
まず利用できます minmax（） 1グリッド列のみ 他の列の幅を単純な静的値（ここではピクセル）として定義します。.
グリッドテンプレート列：minmax（100px、200px）200px 200px。
下のgifデモでは、このレイアウトが 反応しない, しかし最初の列は いくらかの柔軟性. 2列目と3列目は固定幅（200ピクセル）を保持し、1列目は100ピクセルから200ピクセルの範囲です。, 利用可能なスペースに基づいて.
第二に、我々は幅を定義することができます 複数のグリッド列 使う minmax（）. 最小値と最大値はどちらも静的なので、デフォルトでは、グリッドは 反応しない. ただし、列自体は フレキシブル, 100pxから200pxの間だけです。彼ら 同時に成長と縮小 ビューポートのサイズを変更すると.
グリッドテンプレート列：ｍｉｎｍａｘ（１００ｐｘ、２００ｐｘ）ｍｉｎｍａｘ（１００ｐｘ、２００ｐｘ）ｍｉｎｍａｘ（１００ｐｘ、２００ｐｘ）。
我々はまたできることに注意してください 使用 繰り返す（） 関数 と一緒に minmax（）. そのため、前のコードスニペットも次のように書くことができます。
grid-template-columns：repeat（3、minmax（100px、200px））;を繰り返します。
動的長さ値
静的な値とは別に、 minmax（） 機能も受け入れる パーセント単位 そしてその 新しい分数（fr）単位 引数として。それらを使用することによって、私たちは両方のカスタムグリッドを実現することができます。 敏感な そして 寸法を変更する 利用できるスペースに従って.
以下のコードでは、最初の列の幅がグリッドになります。 50％から80％の範囲 2番目と3番目の 残りのスペースを均等に共有する.
grid-template-columns：minmax（50％、80％）1fr 1fr;
動的な値を minmax（） 機能、それはそれを設定することが重要です 理にかなっているルール. 例を示してみましょう。 グリッドがバラバラになる：
grid-template-columns：minmax（1fr、2fr）1fr 1fr;
ブラウザがそうであるように、この規則は意味をなさない。 決定できない に割り当てる値 minmax（） 関数。最小値は 1fr 1fr 1fr 列幅、最大幅 2fr 1fr 1fr. しかし、どちらも非常に小さな画面でも可能です。あります ブラウザが何にも関連しない.
これが結果です。
静的値と動的値を組み合わせる
それはまた可能です 静的値と動的値を組み合わせる. たとえば、上記のCodepenデモでは、 minmax（100px、200px）1fr 1fr。 最初の列がグリッドになるような規則 100ピクセルから200ピクセルの範囲 残りのスペースは 他の2つの間で均等に共有されている.
grid-template-columns：minmax（100ピクセル、200ピクセル）1fr 1fr;
ビューポートが大きくなるにつれて、最初の列が100pxから200pxに拡大することに注目するのは興味深いことです。 frユニットによって支配されている他の2つは成長し始めます 最初の幅が最大幅に達した後にのみ. 端数単位の目的は使用可能な（残りの）スペースを分割することであるため、これは論理的です。.
の 分コンテンツ, 最大コンテンツ, そして 自動 キーワード
あります 第三種の価値 に割り当てることができます minmax（） 関数。の 分コンテンツ, 最大コンテンツ, そして 自動 キーワードはグリッドトラックの寸法を 含まれているコンテンツ.
最大コンテンツ
の 最大コンテンツ キーワード グリッド列を表示する必要があることをブラウザに指示します。 含まれる最も幅の広い要素と同じ幅.
以下のデモに、私は 幅400ピクセルの画像 最初のグリッドトラック内で、次のCSSルールを使用 （記事の最後に、完全に修正されたコードを含むCodepenデモがあります）：
.コンテナグリッドテンプレート列：最大内容1fr 1fr; / ** * minmax（）表記と同じです。* grid-template-columns：minmax（最大内容、最大内容）1fr 1fr; * /
私は使ったことがない minmax（） 記法はまだ、上記のコードのコメントでは、それが同じコードがどのように見えるかを見ることができます（それはここでは余計ですが）.
ご覧のとおり、最初のグリッド列は最も幅の広い要素（ここでは画像）と同じ幅です。これにより、ユーザーはいつでも画像を見ることができます フルサイズで. ただし、特定のビューポートサイズでは、このレイアウトは 反応しない.
分コンテンツ
の 分コンテンツ キーワード グリッド列は、グリッド列と同じ幅にする必要があることをブラウザに指示します。 それが含む最も狭い要素, その方法で オーバーフローにつながらない.
最初の列の値を次のように変更した場合、前のデモ画像がどのように見えるかを見てみましょう。 分コンテンツ：
.container grid-template-columns：最小の内容1fr 1fr; / ** * minmax（）表記と同じです。* grid-template-columns：minmax（最小内容、最小内容）1fr 1fr; * /
最初のグリッドセルのフルサイズを確認できるように、画像の下に緑色の背景を残しました.
ご覧のとおり、最初の列は最小の幅を保持しています。 オーバーフローなしで達成することができます. この例では、これは4番目と7番目のグリッドセルの最小幅によって定義されます。 パディング そして フォントサイズ 最初のセルの画像としてのプロパティ ゼロに縮小できます オーバーフローなし.
グリッドセルにテキスト文字列が含まれている場合, 分コンテンツ だろう 最長の単語の幅に等しい, それがオーバーフローなしでそれ以上縮めることができない最も小さい要素であるので。ここにあなたがどのように見ることができるかBitsOfCodeによるすばらしい記事があります 分コンテンツ そして 最大コンテンツ グリッドセルにテキスト文字列が含まれている場合の動作.
を使う 分コンテンツ そして 最大コンテンツ 一緒に
もし私達 つかいます 分コンテンツ そして 最大コンテンツ 一緒に の中 minmax（） 関数グリッド列を取得します。
- 敏感です
- オーバーフローがない
- 最も幅の広い要素よりも幅が広くない
.container グリッドテンプレート列：minmax（min-content、max-content）1fr 1fr;
私達はまた使用してもいいです 分コンテンツ そして 最大コンテンツ キーワード 他の長さの値と一緒に の中 minmax（） 規則が理にかなっているまで機能。例えば, minmax（25％、最大コンテンツ） または minmax（最小含有量、300ピクセル） 両方とも有効な規則です.
自動
最後に、我々はまた使用することができます 自動 キーワード の議論として minmax（） 関数.
いつ 自動 です 最大値として使用, その値はと同じです。 最大コンテンツ.
いつ 最小値として使用, その値は 最小幅/最小高 これはつまり 自動 時々同じです 分コンテンツ, しかし 常にではない.
前の例では, 分コンテンツ 等しい 自動, 最初のグリッド列の最小幅は常にその最小高さよりも小さいためです。それで、所属CSSのルール：
.container グリッドテンプレート列：minmax（min-content、max-content）1fr 1fr;
このように書くこともできます：
.container grid-template-columns：minmax（自動、自動）1fr 1fr;
の 自動 キーワードも 他の静的および動的単位と一緒に使用される 内部の（ピクセル、fr単位、パーセンテージなど） minmax（） 例えば関数 minmax（自動、300ピクセル） 有効なルールになります.
あなたはどのようにテストすることができます 分コンテンツ, 最大コンテンツ, そして 自動 キーワードは minmax（） 次のCodepenデモの中の関数：
