Share
Jusqu’à présent, nos tutoriels sur les grilles CSS se sont largement concentrés sur explicite valeurs valeurs-piste que nous avons explicitement définis. Nous avons utilisé des rangées de 200 pixels de haut, ou peut-être des colonnes de 1 franc de large, et nous avons explicitement indiqué le nombre souhaité. Mais que se passe-t-il si nous ne savons pas (ou ne voulons pas nous engager) combien de pistes nous voulons? C'est là que implicite les valeurs entrent en jeu, jetons un coup d'oeil.
Voici une grille de base que vous pouvez suivre. Il nous donne un conteneur de grille, avec 9 éléments de grille. Aucune largeur ou quantité de colonne n’ayant encore été définie, chaque élément remplit la largeur maximale disponible:
Imaginons que nous voulions une colonne à gauche et que nous sachions exactement quelle largeur nous voulons: 300px. Nous pouvons définir cela en ajoutant grid-template-columns: 300px; à notre conteneur de grille. Mais on ne nous donnera pas d'autres colonnes à moins que nous explicitement les définir:
Autrement dit, à moins que nous ne disions que nous voulions qu'un des éléments de la grille soit placé (par exemple) dans la colonne 3 à la ligne 1:
.item-3 grille-colonne: 3; rangée de grille: 1;
Cela nous donne alors des colonnes supplémentaires à l'extérieur notre grille définie car CSS Grid utilisera l'espace disponible et son algorithme de placement automatique pour déterminer où tout le reste va.
C’est formidable, et Grid émettra des hypothèses même si nous voulons avoir plus de colonnes, sans que nous ayons à les définir. Mais que se passe-t-il si nous voulons que ces pistes impliquées, aussi nombreuses soient-elles, aient une largeur spécifique? C'est là que colonnes auto-grille entre en jeu.
Si nous voulons que toutes les colonnes, à part la première, aient 100 pixels de large, nous pourrions implicitement affirmer que:
grilles-auto-colonnes: 100px;
Jumelé à notre valeur explicite, nous obtenons le meilleur des deux mondes. Ici, nous disons que nous voulons que la première colonne soit 1fr (qu'il prend une fraction de l'espace restant-auto aurait le même effet ici) et que toutes les autres colonnes suivantes devraient être 100px précisément:
grid-template-columns: 1fr; grilles-auto-colonnes: 100px;
Cela nous donne les éléments suivants:
Et si nous affirmons que le point 3 devrait en fait être placé dans la colonne 5, à la ligne 1, Grid sait quelle largeur donner aux colonnes supplémentaires car il est implicite.
Ici, nous ne sommes pas limités aux valeurs de pixels; nous pourrions utiliser des unités de fraction, des unités em, même le min max() notation que nous avons discuté dans les tutoriels précédents.
Il va presque sans dire que lignes-grille automatique fera la même chose pour les lignes colonnes auto-grille fait pour les colonnes. Voici un exemple, où toutes les lignes sauf les deux premières sont fixées à une hauteur de 200px.
De nombreuses propriétés de Grid ont des valeurs par défaut qui vous protégeront si vous ne définissez rien de différent, mais nous avons parfois besoin d'impliquer au moins ce que nous voulons. Avec le dimensionnement implicite des pistes, nous pouvons déterminer la taille de toutes les lignes ou colonnes supplémentaires, si nécessaire..
Accentsconagua