CSS グリッドの自動入力と自動フィット: 違いは何ですか?

グリッド レイアウトの自動入力と自動調整の違いを理解する

CSS グリッドを使用する場合、「」という用語がよく出てきます。カードベースのグリッド レイアウトを確立する場合の「自動入力」と「自動フィット」。これらのプロパティは、使用可能なアイテムが使用可能なスペースを完全に満たさない可能性があるシナリオをグリッドがどのように処理するかを決定します。

自動入力と自動調整

両方の自動入力および auto-fit は、指定された数のグリッド トラック (列または行) を作成しますが、利用可能なアイテムがすべてのグリッド トラックを満たすのに不十分な場合、動作は異なります。トラック。

• 自動調整: すべてのトラックを埋めるのに十分なアイテムがない場合、空のトラックは折りたたまれ、既存のアイテムが拡張して空きスペースを埋めます。
• オートフィル: オートフィットとは異なり、空のトラックはオートフィルで保持され、その結果、グリッド レイアウトは固定されます。

カードの表示への影響

カード グリッド レイアウトで、自動調整の代わりに自動入力を使用すると、カードが確実に表示されます。たとえ数が少ない場合でも、別個のエンティティとして表示されたままになります。固定グリッド構造を維持することで、自動入力によりカードを均等に分散し、明確に分けることができます。

例

次のコードを考えてみましょう:

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

自動入力を使用すると、すべてのフィールドを埋めるのに十分なカードがあるかどうかに関係なく、グリッド コンテナーはラッパーをオーバーフローさせることなく、できるだけ多くの列を作成します。列。既存のカードは、カードのレイアウトを維持しながら、等間隔で独立して表示されます。

結論

自動入力と自動調整のどちらを選択するかは、必要な動作によって異なります。アイテム数が異なるシナリオ。一貫したグリッド構造を維持するには自動フィルが推奨されますが、自動フィットは空のトラックを折りたたんで項目を拡張して利用可能なスペースを埋めることができます。

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