Remplissage automatique ou ajustement automatique dans la grille CSS : quelle est la différence ?

Comprendre la distinction entre le remplissage automatique et l'ajustement automatique dans les dispositions de grille

Lorsque vous travaillez avec des grilles CSS, vous rencontrez souvent les termes " remplissage automatique" et "ajustement automatique" dans le contexte de l'établissement d'une disposition de grille basée sur des cartes. Ces propriétés déterminent la manière dont la grille gère les scénarios dans lesquels les éléments disponibles peuvent ne pas remplir complètement l'espace disponible.

Remplissage automatique ou ajustement automatique

Remplissage automatique des deux et l'ajustement automatique créent le nombre spécifié de pistes de grille (colonnes ou lignes), mais leur comportement diffère lorsque les éléments disponibles sont insuffisants pour remplir tous les éléments. pistes.

• Ajustement automatique : S'il n'y a pas assez d'éléments pour remplir toutes les pistes, les pistes vides sont réduites et les éléments existants se développent pour remplir l'espace libéré.
• Remplissage automatique : Contrairement à l'ajustement automatique, les pistes vides sont conservées lors du remplissage automatique, ce qui donne une disposition de grille fixe, quel que soit le nombre de pistes. éléments.

Impact sur l'affichage des cartes

Dans la disposition de votre grille de cartes, l'utilisation du remplissage automatique au lieu de l'ajustement automatique garantira que les cartes restent affichées comme entités distinctes, même s’il n’y en a que quelques-unes. En conservant la structure de grille fixe, le remplissage automatique permet à vos cartes d'être réparties uniformément et clairement séparées.

Exemple

Considérez le code suivant :

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

Avec le remplissage automatique, le conteneur de grille créera autant de colonnes que possible sans déborder du wrapper, qu'il y ait ou non suffisamment de cartes pour remplir toutes les colonnes. colonnes. Les cartes existantes seront uniformément espacées et affichées indépendamment, préservant la disposition des cartes.

Conclusion

Le choix entre le remplissage automatique et l'ajustement automatique dépend du comportement souhaité dans scénarios avec différents nombres d’articles. Le remplissage automatique est préférable pour maintenir une structure de grille cohérente, tandis que l'ajustement automatique réduit les pistes vides pour permettre aux éléments de s'étendre et de remplir l'espace disponible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!