CSS グリッドの自動入力または自動フィット: いつどちらを選択すべきですか?

自動入力と自動フィット: グリッド レイアウトの保持

CSS グリッドで、repeat(auto-fit, minmax() を利用する) ) カード レイアウトの場合、すべての列を埋めるのに十分な項目が行にない場合に問題が発生します。これを解決するには、代わりに自動入力を利用することを検討してください。

自動フィットと自動入力について

自動フィットと自動入力はどちらもグリッド トラックを作成することを目的としています。コンテナをオーバーフローさせることなく動的に（列または行）を移動します。ただし、グリッド項目の数が作成されたトラックに満たない場合、それらの動作は異なります。

自動調整の動作

自動調整では、空のトラックは折りたたまれます。既存のアイテム間で再配分されるスペースを解放します。これにより、隙間がある場合でも、カードのようなアイテムが行全体を埋めるように拡張されます。

自動入力動作

自動入力では空のトラックが維持され、保持されます。グリッドのレイアウト。アイテムはトラック内に配置され、残りの空のトラックはそのまま残ります。これにより、アイテムの数に関係なく、グリッド構造の一貫性が保たれます。

視覚的な比較

3 つのグリッド アイテムがあるシナリオを考えてみましょう:

自動入力:

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

[画像空のトラックが保存された 3 つのグリッド項目の画像]

自動調整:

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

[行を埋めるように拡張された 3 つのグリッド項目の画像]

結論

グリッド構造を維持することが重要であるレイアウトの場合項目数を調整するには、自動入力を使用することをお勧めします。これにより、行に隙間や部分的に埋められたトラックがある場合でも、カードのようなアイテムが目的の形状と間隔を維持することができます。

以上がCSS グリッドの自動入力または自動フィット: いつどちらを選択すべきですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。