Pourquoi `minmax()` dans `grid-template-rows` favorise-t-il la taille maximale et comment puis-je maintenir les hauteurs minimales des lignes ?

Fonction minmax() par défaut sur le comportement maximum

Lors de l'application de minmax() aux lignes de modèle de grille, le comportement résultant défie souvent les attentes, donnant la priorité à la valeur maximale par rapport à la valeur minimale. Cela conduit à un étirement inattendu des lignes de la grille, nous laissant nous demander :

Comment conserver les lignes de la grille à leur taille minimale

Pour garantir que les lignes de la grille restent à leur taille minimale déclarée, tout en s'étendant au maximum si nécessaire, envisager la solution suivante :

1. Utilisez minmax(min-content, max-size) pour les lignes de modèle de grille

Cette modification force les lignes à "s'enrouler étroitement" autour de leur contenu, garantissant qu'elles commencent avec la taille minimale et ne s'étendent que lorsque plus de contenu est ajouté. La taille maximale garantit qu'ils ne dépassent pas le maximum souhaité.

2. Ajouter une hauteur maximale aux éléments de la grille

Pour empêcher les éléments de la grille de s'étendre au-delà de la taille maximale souhaitée, définissez une hauteur maximale dessus.

Exemple :

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

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

Avec cette approche, les lignes de la grille auront initialement une hauteur de 50 px, mais s'agrandiront pour s'adapter à du contenu supplémentaire. Ils ne dépasseront cependant pas la hauteur maximale de 150 px.

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!