Propriétés CSS grid-auto-rows et grid-auto-columns.

Schéma de la syntaxe de grid-auto-rows.

Les termes utilisés sont décrits ci-dessous :

• length est une valeur numérique suivie d'une des unités de dimension. L'unité fr est particulièrement intéressante ici.
• % est un pourcentage calculé par rapport à la hauteur du conteneur grille.
• 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.

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 les grilles 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.

• 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 ou grid-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 ou grid-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 fonction fit-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 fonction fit-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és 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(), clamp(), 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 de hauteur2, pour la troisième, on revient sur hauteur1, etc.

• grid-auto-columns: initial; (auto) grid-auto-columns: inherit; grid-auto-columns: revert; grid-auto-columns: revertLayer; grid-auto-columns: unset;

  grid-auto-rows: initial; (auto) grid-auto-rows: inherit; grid-auto-rows: revert; grid-auto-rows: revertLayer; grid-auto-rows: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de grid-auto-rows.

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.

Exemple interactif avec la propriété grid-auto-rows.

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.

Compatibilité des navigateurs avec grid-auto-rows.

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.

Remarques :

(1) Utilise la propriété non standard -ms-grid-rows.

(2) Utilise la propriété non standard -ms-grid-columns.

1

Propriété
grid-auto-rows

2

Propriété
grid-auto-columns

Estimation de la prise en charge globale.

96%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

2

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété grid-auto-rows.

• Module CSS - Mise en page par grille - Niveau 1

  Cette spécification définit comment réaliser des mises en page sous frome de grilles, composées de lignes et de colonnes, avec une structure du document qui reste très simple : un conteneur et autant d'éléments que de cellules. Beaucoup plus simple en tout cas que les tableaux.
  Chacune des cellules peut être alignée horizontalement dans le largeur des colonnes, ou verticalement dans la hauteur des lignes. Elles peuvent aussi être réparties ou agrandies pour couvrir toute la place disponible. Le contenu de chacune des cellules peut être aligné horizontalement et verticalement.
  Une nouvelle unité (fr) est disponible pour dimensionner les colonnes ou les lignes.

  Concernant grid-auto-rows. Introduction des grilles pour les mises en page complexes dans ce niveau 1 de la spécification.
  Définition des propriétés grid-auto-columns et grid-auto-rows.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Ce niveau 2 de la spécification sur les grilles introduit la notion de sous-grille. Il s'agit de grille imbriquées dans une autre, avec conservation des alignement de colonnes et/ou de lignes.

  Concernant grid-auto-rows. Pas de changement concernant les propriétés grid-auto-rows et grid-auto-columns.
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 3

  Le niveau 3 de la spécification introduit une nouvelle notion : les grilles maçonnerie. Il s'agit de grilles dont seules les colonnes ou les lignes sont figées, l'autre dimension pouvant évoluer en fonction de la taille des éléments contenus. Ceci a nécessité l'ajout de plusieurs propriétés.

  Concernant grid-auto-rows. Pas de changement concernant spécifiquement les propriétés grid-auto-rows et grid-auto-columns, mais l'option "maçonnerie" (masonry) impacte leur fonctionnement.
  

  19 Septembre 2024

  Document de travail.

  

  

  

Voir aussi les autres propriétés relatives aux grilles.

Propriétés :

Fonctions :