Maison > interface Web > tutoriel CSS > Pourquoi mes lignes de grille CSS sont-elles définies par défaut sur la valeur maximale « minmax() » et comment puis-je y remédier ?

Pourquoi mes lignes de grille CSS sont-elles définies par défaut sur la valeur maximale « minmax() » et comment puis-je y remédier ?

Susan Sarandon
Libérer: 2024-12-08 12:24:13
original
310 Les gens l'ont consulté

Why Are My CSS Grid Rows Defaulting to Maximum `minmax()` Value, and How Can I Fix It?

Les lignes de grille sont définies par défaut au maximum : résoudre le problème

Dans une tentative récente d'utiliser minmax() pour les lignes de modèle de grille, il a été découvert que les lignes de la grille s'étendaient jusqu'à la valeur maximale de minmax() au lieu du minimum. Cela posait le défi de maintenir la taille des lignes à leur taille minimale déclarée tout en l'étendant à la taille maximale uniquement lorsque du contenu supplémentaire était ajouté.

Pour résoudre ce problème, l'approche suivante peut être mise en œuvre :

  • Utilisez minmax(50px, min-content) pour la taille des lignes : cela garantit que les lignes s'enroulent étroitement autour de leur contenu, mais ne rétrécissent pas en dessous 50px.
  • Ajouter une hauteur maximale : 150px aux éléments de la grille : Cela définit une hauteur maximale pour chaque élément de la grille, limitant leur croissance à 150px.

Par en combinant ces techniques, les lignes de la grille resteront à la taille minimale déclarée jusqu'à ce que davantage de contenu soit ajouté, auquel cas elles s'étendront jusqu'à la taille maximale sans dépasser la taille spécifiée. limite.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal