`grid-template-rows` の `minmax()` が最大サイズを優先するのはなぜですか? 最小行の高さを維持するにはどうすればよいですか?

minmax() 関数の最大動作のデフォルト

minmax() をグリッド テンプレート行に適用すると、結果として生じる動作が期待に反し、最大値が優先されることがよくあります。最小値。これにより、グリッド行が予期せず拡大されてしまい、次のような疑問が生じます。

グリッド行を最小サイズに保つ方法

グリッド行を最大まで拡張しながら、宣言された最小サイズを維持するには必要に応じて、次の解決策を検討してください。

1. Grid-template-rows に minmax(min-content, max-size) を使用します

この変更により、行がコンテンツの周りを「しっかりと包み込む」ように強制され、行が最小サイズで開始され、のみ展開されるようになります。さらにコンテンツが追加されたとき。最大サイズは、必要な最大サイズを超えないことを保証します。

2.グリッド項目に max-height を追加します

グリッド項目が希望の最大サイズを超えて伸びるのを防ぐには、グリッド項目に max-height を設定します。

例:

body {
  grid-template-rows: minmax(50px, min-content);
}

grid-items {
  max-height: 150px;
}

このアプローチでは、グリッド行は最初は 50 ピクセルの高さですが、追加のコンテンツに合わせて拡大されます。ただし、最大高さ 150 ピクセルを超えることはありません。

以上が`grid-template-rows` の `minmax()` が最大サイズを優先するのはなぜですか? 最小行の高さを維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。