Propriétés CSS grid-auto-rows
et grid-auto-columns
.
Résumé des caractéristiques de la propriété grid-auto-columns
auto
| max-content
| min-content
| fit-content()
auto
grid-auto-columns
passe d'une valeur à l'autre sans transition.Description des propriétés grid-auto-rows
et grid-auto-columns
.
grid-auto-rows
définit la hauteur par défaut des lignes d'une grille.
Il s'agit bien d'une hauteur par défaut, qui ne concerne que les lignes dont la hauteur n'est pas définie
explicitement avec grid-template-rows
.
De la même façon, grid-auto-columns
définit la largeur par défaut des colonnes d'une grille.
Cela ne concerne que les colonnes dont la largeur n'est pas définie explicitement avec grid-template-columns
.
Ces deux propriétés interviennent également lorsque des lignes ou des colonnes supplémentaires sont ajoutées à la grille sans avoir été définies au départ. Pour les lignes cela peut être simplement parce qu'il y a plus d'éléments que prévu. Pour les colonnes cela peut être dû au fait qu'un des éléments a été forcé dans un numéro de colonne supérieur au nombre de colonnes défini.
Dans l'exemple ci-dessous, on a défini 4 colonnes avec une largeur de 50 pixels, et 2 lignes avec une hauteur de 30 pixels.
Par la suite un des éléments de la grille a été forcé en ligne 4 et en colonne 6.
On voit nettement que les deux colonnes supplémentaires ont pris la largeur indiquée par grid-auto-columns
,
soit 200 pixels, et que les deux lignes supplémentaires ont une hauteur par défaut définie par grid-auto-rows
.
La troisième ligne ne contient pas d'élément, mais sa hauteur est néanmoins définie à la valeur par défaut de 50 pixels.
Voir aussi les propriétés grid-template-rows
et grid-template-columns
qui permettent de définir explicitement
la hauteur de chacune des lignes et la largeur de chacune des colonnes.
Vous pouvez aussi consulter le tutoriel sur pour une présentation générale des grilles et des propriétés qui s'y rattachent.
Syntaxes pour grid-auto-rows
et grid-auto-columns
.
length
est une valeur numérique suivie d'une unité de dimension.%
est un pourcentage dont l'évaluation correspond à une dimension.fr
est une valeur numérique suivie de l'unitéfr
, particulièrement adaptée ici.fct()
est une des fonctions proposées par CSS pour le calcul de dimensionnement dans une grille :fit-content()
,min-max()
, etc.
Cette syntaxe peut être répétée plusieurs fois en séparant les occurrences par un espace.
Le schéma a été construit pour grid-auto-rows
; la syntaxe de grid-auto-columns
est exactement identique.
- grid-auto-rows: auto; grid-auto-columns: auto;
Valeur par défaut. La hauteur des lignes ou la largeur des colonnes, lorsqu'elles ne sont pas explicitement indiquées, sont déterminées par rapport au contenu de chacun des éléments dans la grille. Le calcul est optimisé pour que les colonnes tiennent dans la largeur du container grille.
- grid-auto-rows: max-content; grid-auto-columns: max-content;
La hauteur des lignes et la largeur des colonnes, lorsqu'elles ne sont pas explicitement indiquées par
grid-template-rows
ougrid-template-columns
, sont déterminées par le contenu le plus long trouvé sur la ligne ou sur la colonne, celui-ci étant affiché sur une seule ligne, c'est à dire sans retours à la ligne.Pour une présentation plus détaillée de cette valeur, reportez-vous à la page sur la valeur
max-content
. - grid-auto-rows: min-content; grid-auto-columns: min-content;
La hauteur des lignes et la largeur des colonnes non explicitement indiquées par
grid-template-rows
ougrid-template-columns
, sont déterminées par le contenu le plus long trouvé dans la colonne, après avoir inséré le plus possible de retours à la ligne.Reportez-vous à la page sur la valeur
min-content
pour une description plus complète. - grid-auto-rows: fit-content; grid-auto-columns: fit-content;
La valeur
fit-content
ou la fonctionfit-content()
déterminent une hauteur de ligne ou une largeur de colonne en se basant sur le contenu et sur la place disponible dans le conteneur grille.Reportez-vous à la page sur la valeur
fit-content
ou la fonctionfit-content()
. - grid-auto-rows: 100px; grid-auto-columns: 100px;
La hauteur des lignes ou la largeur des colonnes, lorsqu'elle ne sont pas explicitement définies par une propriété
template...
, sont fixées à la valeur indiquée.L'unité peut être n'importe laquelle des unité de dimension. S'il s'agit de pourcentages, ils seront évalués par rapport aux dimensions du container grille.
Si le total des pourcentages de toutes les colonnes n'est pas égal à 100%, les colonnes peuvent laisser un espace vide sur la droite du container grille, ou au contraire dépasser le container.
Il en est de même pour les lignes dans le cas où la hauteur du container grille a été fixée. Dans le cas contraire la hauteur du container s'adapte à la hauteur totale de toutes les lignes.
Attention ! Les espacements entre les lignes ou entre les colonnes ne sont pas pris en compte dans le calcul des pourcentages. Pour éviter ce problème, utilisez plutôt l'unitéfr
.L'unité
fr
est particulièrement bien adaptée au dimensionnement des lignes ou des colonnes d'une grille car c'est une unité relative à la place restante dans le conteneur : les lignes ou colonnes remplissent toujours le conteneur sans laisser d'espace perdu, et sans déborder.
- grid-auto-rows: minmax(50px,100px); grid-auto-columns: minmax(50px,100px);
Cette syntaxe maintient la hauteur des lignes ou la largeur des colonnes dans la plage indiquée : sur notre exemple entre 50 et 100 pixels, tout en adaptant au mieux ces dimensions au contenu.
Voir aussi les fonctions
minmax()
,fit-content()
, , etc. - grid-auto-rows: hatueur1 hauteur2; grid-auto-columns: largeur1 largeur2;
Plusieurs hauteurs de ligne ou largeurs de colonne peuvent être indiquées en les séparant par un espace. Ces valeurs sont alors appliquées de façon cyclique : la première ligne aura une hauteur de
hauteur1
, la deuxième dehauteur2
, pour la troisième, on revient surhauteur1
, etc. - grid-auto-columns:
initial
; grid-auto-columns:inherit
; grid-auto-columns:revert
; grid-auto-columns:revert-layer
; grid-auto-columns:unset
;La valeur initiale est :
.auto
Animation de la propriété grid-auto-columns
.
Comme on peut le voir sur l'exemple ci-dessous, l'animation de grid-auto-rows
passe brutalement de la valeur
de départ à la valeur finale.
Simulateur.
Pour la grille ci-dessous, les largeurs de colonnes et les hauteurs de lignes ont volontairement été laissées indéfinies
(pas de valeur attribuée aux propriétés grid-template-columns
et grid-template-rows
).
On a simplement imposé le nombre de lignes et de colonnes en forçant le dernier élément sur la ligne 3 et la colonne 3.
La largeur des colonnes et la hauteur des lignes sont donc définies entièrement par les propriétés grid-auto-columns
et grid-auto-rows
.
Vous constaterez que l'utilisation des valeurs …-content
avec la grid-template-rows
n'a pas d'effet sur le résultat parce que,
dans cet exemple, les largeurs de colonnes ont déjà fixé les retours à la ligne dans chacune des cellules.
de chez Microsoft.
Prise en charge par les navigateurs (compatibilité).
La prise en charge des grilles est globalement assez bonne, sauf pour l'ancien navigateur Internet explorer qui traite
les propriétés relatives aux grilles de façon différente.
Reportez-vous à la page sur la propriété grid
pour une description plus détaillée
des problèmes de compatibilité avec Internet Explorer.
En ce qui concerne les deux propriétés présentées sur cette page, la prise en charge est globalement très bonne.
grid-auto-rows
grid-auto-columns
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que grid-auto-columns
.
Les spécifications CSS éditées par le W3C sont organisées en modules. grid-auto-columns
fait partie du Module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.