CSS Grid Layout Comment utiliser minmax ()

le Module de disposition de grille CSS prend la conception sensible au niveau suivant en introduisant un nouveau type de flexibilité cela n'a jamais été vu auparavant. Maintenant, nous ne pouvons pas seulement définir des grilles personnalisées extrêmement rapide uniquement avec du CSS pur, mais la grille CSS a également beaucoup de joyaux cachés qui nous permettent d’affiner la grille et d’obtenir des schémas compliqués.

le min max() une fonction est l’une de ces caractéristiques moins connues. Il permet de définir la taille d'une piste de grille entre minimum et maximum afin que la grille puisse s'adapter au mieux possible à la vue de chaque utilisateur.

Syntaxe

La syntaxe de la min max() la fonction est relativement simple, il faut deux arguments: un minimum et un maximum:

 minmax (min, max) 

le min valeur doit être plus petit que le max, autrement max est ignoré par le navigateur.

Nous pouvons utiliser le min max() fonctionner comme valeur de la Grille-modèle-colonnes ou grid-template-rows propriété (ou les deux). Dans notre exemple, nous utiliserons l'ancien, car c'est un cas d'utilisation beaucoup plus fréquent.

 .conteneur display: grid; Grille-modèle-colonnes: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; intervalle de grille: 10 px;  

Dans la démo de Codepen ci-dessous, vous pouvez trouver le Code HTML et CSS nous utiliserons tout au long de l'article.

On peut utiliser différents types de valeurs à l'intérieur de min max() fonction, tout dépend de quel type de grille personnalisée nous voulons créer.

Valeurs de longueur statique

Il y a deux manières fondamentales d’utiliser le min max() fonctionner avec valeurs de longueur statique.

Tout d'abord, nous pouvons utiliser min max() seulement pour une colonne de la grille et définir la largeur des autres colonnes comme de simples valeurs statiques (pixels ici).

 grid-template-columns: minmax (100px, 200px) 200px 200px; 

Sur la démo gif ci-dessous, vous pouvez voir que cette disposition est pas sensible, cependant la première colonne a un peu de flexibilité. Les deuxième et troisième colonnes conservent leur largeur fixe (200px) tandis que la première colonne est comprise entre 100px et 200px., basé sur l'espace disponible.

Deuxièmement, nous pouvons définir la largeur de plus d'une colonne de la grille en utilisant min max(). Les valeurs min et max sont toutes deux statiques. Ainsi, par défaut, la grille est pas sensible. Cependant, les colonnes elles-mêmes sont flexible, mais seulement entre 100px et 200px. Ils croître et rétrécir simultanément comme nous changeons la taille de la fenêtre.

 Grille-modèle-colonnes: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Notez que nous pouvons aussi Utilisez le répéter() une fonction ensemble avec min max(). Ainsi, l'extrait de code précédent peut également être écrit comme suit:

 Grille-modèle-colonnes: répéter (3, minmax (100px, 200px)); 

Valeurs de longueur dynamique

Outre les valeurs statiques, le min max() fonction accepte également unités de pourcentage et le nouvelle fraction (fr) unité comme arguments. En les utilisant, nous pouvons réaliser des grilles personnalisées à la fois sensible et changer leurs dimensions en fonction de l'espace disponible.

Le code ci-dessous donne une grille dans laquelle la largeur de la première colonne varie entre 50% et 80% tandis que le deuxième et le troisième partager uniformément l'espace restant.

 Grille-modèle-colonnes: minmax (50%, 80%) 1fr 1fr; 

Quand on utilise des valeurs dynamiques avec le min max() fonction, il est crucial de mettre en place un règle qui a du sens. Laissez-moi vous montrer un exemple où la grille tombe en morceaux:

 Grille-modèle-colonnes: minmax (1fr, 2fr) 1fr 1fr; 

Cette règle n'a aucun sens, car le navigateur est incapable de décider quelle valeur attribuer à la min max() une fonction. La valeur minimale conduirait à une 1fr 1fr 1fr largeur de la colonne, tandis que le maximum de 2fr 1fr 1fr. Mais, les deux sont possibles même sur un très petit écran. Il y a rien que le navigateur peut se rapporter.

Voici le résultat:

Combinez des valeurs statiques et dynamiques

Il est également possible de combiner des valeurs statiques et dynamiques. Par exemple, dans la démonstration de Codepen ci-dessus, j’ai utilisé le minmax (100px, 200px) 1fr 1fr; règle qui résulte dans une grille où la première colonne varie entre 100px et 200px et l'espace restant est également répartis entre les deux autres.

 Grille-modèle-colonnes: minmax (100px, 200px) 1fr 1fr; 

Il est intéressant de noter que lorsque la fenêtre d'affichage augmente, la première colonne passe de 100 à 200 pixels. Les deux autres, dirigés par l'unité fr, commencent à se développer seulement après que le premier a atteint sa largeur maximale. C’est logique, l’objectif de l’unité fraction étant de diviser l’espace disponible (restant).

le contenu min, max-content, et auto mots clés

Il y a un troisième type de valeur on peut assigner au min max() une fonction. le contenu min, max-content, et auto mots-clés relient les dimensions d'une piste de la grille à la contenu qu'il contient.

max-content

le max-content mot-clé indique au navigateur que la colonne de la grille doit être aussi large que l'élément le plus large qu'il contient.

Sur la démo ci-dessous, j'ai placé un Image large 400px dans la première piste de grille, et a utilisé la règle CSS suivante (vous pouvez trouver une démo de Codepen avec le code complet modifié à la fin de l'article):

 .conteneur grille-modèle-colonnes: max-contenu 1fr 1fr; / ** * Idem avec la notation minmax (): * grid-template-columns: minmax (max-contenu, max-contenu) 1fr 1fr; * / 

Je n'ai pas utilisé min max() notation pour le moment, mais dans le commentaire de code ci-dessus, vous pouvez voir à quoi ressemblerait le même code (même si c'est superflu ici).

Comme vous pouvez le constater, la première colonne de la grille est aussi large que son élément le plus large (ici l'image). De cette façon, les utilisateurs peuvent toujours voir l'image en taille réelle. Cependant, sous une certaine taille de fenêtre, cette disposition est pas sensible.

contenu min

le contenu min mot-clé indique au navigateur que la colonne de la grille doit être aussi large que le élément le plus étroit qu'il contient, de façon que ne conduit pas à un débordement.

Voyons à quoi ressemble la démo précédente avec l'image si nous modifions la valeur de la première colonne en contenu min:

 .conteneur grid-template-columns: min-contenu 1fr 1fr; / ** * Idem avec la notation minmax (): * grid-template-columns: minmax (min-contenu, min-contenu) 1fr 1fr; * / 

J'ai laissé le fond vert en dessous de l'image pour que vous puissiez voir la taille complète de la première cellule de la grille.

Comme vous pouvez le constater, la première colonne conserve la plus petite largeur peut être réalisé sans débordement. Dans cet exemple, cela sera défini par la largeur minimale des 4ème et 7ème cellules de la grille, qui provient de la rembourrage et taille de police propriétés, comme l'image dans la première cellule pourrait être réduit à zéro sans débordement.

Si la cellule de la grille contenait une chaîne de texte, contenu min serait égale à la largeur du mot le plus long, comme c'est le plus petit élément qui ne peut pas être réduit davantage sans un débordement. Voici un excellent article de BitsOfCode où vous pouvez voir comment contenu min et max-content se comporter lorsque la cellule de la grille contient une chaîne de texte.

En utilisant contenu min et max-content ensemble

Si nous utilisation contenu min et max-content ensemble à l'intérieur de min max() fonction nous obtenons une colonne de grille qui:

1. est sensible
2. n'a pas de débordement
3. ne devient pas plus large que son élément le plus large

 .conteneur grid-template-columns: minmax (min-contenu, max-contenu) 1fr 1fr;  

Nous pouvons également utiliser le contenu min et max-content mots clés avec d'autres valeurs de longueur à l'intérieur de min max() fonction, jusqu'à ce que la règle ait un sens. Par exemple, minmax (25%, contenu maximum) ou minmax (contenu min., 300 pixels) serait à la fois des règles valables.

auto

Enfin, nous pouvons également utiliser le auto mot-clé comme argument de la min max() une fonction.

Quand auto est utilisé comme maximum, sa valeur est identique à max-content.

Quand il est utilisé au minimum, sa valeur est spécifiée par le largeur min / hauteur min règle, ce qui signifie que auto est parfois identique à contenu min, mais pas toujours.

Dans notre exemple précédent, contenu min est égal à auto, car la largeur minimale de la première colonne de la grille est toujours inférieure à sa hauteur minimale. Donc, la règle CSS d'appartenance:

 .conteneur grid-template-columns: minmax (min-contenu, max-contenu) 1fr 1fr;  

pourrait être aussi écrit comme ceci:

 .conteneur grid-template-columns: minmax (auto, auto) 1fr 1fr;  

le auto le mot clé peut aussi être utilisé avec d'autres unités statiques et dynamiques (pixels, unité fr, pourcentages, etc.) à l'intérieur du min max() fonction, par exemple minmax (auto, 300px) serait une règle valide.

Vous pouvez tester comment le contenu min, max-content, et auto les mots clés fonctionnent avec le min max() fonctionner dans la démo suivante de Codepen: