CSS グリッドの `minmax()` がデフォルトで `min` ではなく `max` になるのはなぜですか?

minmax() がデフォルトで Max になる理由

お気づきかもしれませんが、minmax() を使用してグリッドの行または列の高さまたは幅を設定すると、デフォルトの動作がトラックが最小サイズにとどまるのではなく、最大サイズまで拡張するためのものです。これは、特に minmax() の min() 値に従ってトラックが可能な限り最小のサイズにとどまることを期待している場合に混乱を招く可能性があります。

動作を理解する

理由この動作は、グリッド レイアウト内のトラックのデフォルトのスケーリング モードにあります。 CSS 仕様によると、トラックは通常、最大サイズに達するまで、利用可能なスペースを埋めるために拡大します。使用可能なスペースがすべてのトラックの合計最小サイズよりも大きい場合、残りのスペースは無制限のトラック (最大サイズが定義されていないトラック) に均等に分配されます。

このデフォルトの動作は、通常は望ましい動作です。

最小サイズ優先の達成

グリッドの行または列を最小サイズのままにするには、さらにコンテンツを追加するときに最大サイズまで拡張するには、minmax() と他の CSS プロパティを組み合わせて使用​​できます。

• 行には minmax(min-size, min-size) を使用します。 /Column Sizing: これにより、使用可能なスペースがある場合でも、トラックが常に最小サイズに維持されるようになります。
• 指定グリッド項目の max-width/max-height: これにより、グリッド項目が最大サイズを超えることがなくなり、グリッドの行または列が指定された最大サイズを超えて拡張されなくなります。

例:

body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 100px));
  grid-gap: 20px;
}

.item {
  max-width: 200px;
}

この例では、グリッド列の最小幅は常に 100px ですが、そのサイズを超えて拡張することはありません。グリッド項目にさらにコンテンツが追加されると、新しいコンテンツを収容できるように列が拡張されますが、最大幅を超えることはありません。

以上がCSS グリッドの `minmax()` がデフォルトで `min` ではなく `max` になるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。