Pourquoi « minmax() » dans la grille CSS est-il par défaut « max » au lieu de « min » ?

Pourquoi minmax() est défini par défaut sur Max

Vous avez peut-être remarqué que lorsque vous utilisez minmax() pour définir la hauteur ou la largeur des lignes ou des colonnes de la grille, le comportement par défaut est que la piste s'étende jusqu'à sa taille maximale au lieu de rester à sa taille minimale. Cela peut prêter à confusion, surtout si vous vous attendez à ce que la piste reste à sa plus petite taille possible selon la valeur min() dans minmax().

Comprendre le comportement

La raison de ce comportement réside dans le mode de mise à l'échelle par défaut des pistes dans une disposition en grille. Selon la spécification CSS, les pistes s'agrandiront généralement pour remplir l'espace disponible jusqu'à ce qu'elles atteignent leur taille maximale. Si l'espace disponible est supérieur à la taille minimale totale de toutes les pistes, l'espace restant est réparti uniformément entre les pistes illimitées (ceux sans taille maximale définie).

Ce comportement par défaut est généralement souhaité, car il garantit que les pistes occupent efficacement l'espace disponible.

Atteindre la priorité de taille minimale

Pour que les lignes ou les colonnes de la grille restent à leur taille minimale, mais s'étendent à leur taille maximale lorsque plus de contenu est ajouté, vous pouvez utiliser une combinaison de minmax() et d'autres propriétés CSS :

• Utilisez minmax(min-size, min-size) pour le dimensionnement des lignes/colonnes : Ceci forcera les pistes à toujours rester à leur taille minimale, même lorsqu'il y a de l'espace disponible.
• Spécifiez la largeur maximale/la hauteur maximale sur la grille Articles : Cela empêchera les éléments de la grille de dépasser leur taille maximale, garantissant ainsi que les lignes ou les colonnes de la grille ne s'étendent pas au-delà de leur taille maximale spécifiée.

Exemple :

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

.item {
  max-width: 200px;
}

Dans cet exemple, les colonnes de la grille auront toujours une largeur minimale de 100 px, mais ne s'étendront pas au-delà de cette taille. Si davantage de contenu est ajouté aux éléments de la grille, les colonnes s'agrandiront pour accueillir le nouveau contenu, mais ne dépasseront pas leur largeur maximale.

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!