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

grid-auto-columns
grid-auto-rows

Résumé des caractéristiques de la propriété grid-auto-columns

Description rapide
Définit la largeur par défaut des colonnes dans une grille.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
auto | max-content | min-content | fit-content()
Pourcentages
Calculés par rapport aux dimensions de l'élément parent.
Valeur initiale
auto
Héritée par défaut
Non.
Type d'animation
Discrète : lors d'une animation, la propriété grid-auto-columns passe d'une valeur à l'autre sans transition.
Module W3C
Module CSS - Mise en page par grille
Références (W3C)
 🡇  
 🡅  
Statut du document: CR (document candidat à la recommandation)
Statut du document: CR (document candidat à la recommandation)

Schéma syntaxique de grid-auto-columns.

Grid-auto-rows property - Syntax diagramSyntax diagram of the grid-auto-rows CSS property. See stylescss.free.fr for details. auto auto length / % length / % min-content min-content max-content max-content fit-content fit-content fct() fct()grid-auto-rows:;grid-auto-rows:;
Schéma syntaxique de la propriété grid-auto-rows
La syntaxe de grid-auto-columns est exactement identique
Télécharger le schéma en SVG

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.

1
2
3
4
5
6
7
8
9
10
11
12

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 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(), , 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.

Valeurs globales
(communes à toutes les propriétés)

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.

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.

1
2
3
4
5
6
7
8
9
10
11
12

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

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.

grid-auto-columns :
grid-auto-rows :
Langage C : un des plus anciens langages de programmation.
HTML
Java : versatile et robuste.
Python : le couteau suisse du développeur.
CSS
SQL : la 4ème génération.
PHP : un des plus anciens langage coté serveur.
Javascript
Visual Basicbr
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.

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

Historique de la propriété grid-auto-columns.

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

    Introduction des grilles pour la mise en page dans ce niveau 1 de la spécification.
    Définition des propriétés grid-auto-columns et grid-auto-rows.
    WD
    07 Avril 2011
    Document de travail.
    CR
    29 Septembre 2016
    Candidat à la recommandation.
    PR
    REC

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

    Pas de changement concernant les propriétés grid-auto-columns et grid-auto-rows.
    WD
    06 Février 2018
    Document de travail.
    CR
    18 Août 2020
    Candidat à la recommandation.
    PR
    REC

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

    Pas de changement concernant spécifiquement les propriétés grid-auto-columns et grid-auto-rows, mais l'option "maçonnerie" (masonry) impacte leur fonctionnement.
    WD
    19 Septembre 2024
    Document de travail.
    CR
    PR
    REC

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

Propriétés :

grid
Propriété résumée définissant les principaux paramètres d'une grille.
grid-area
Positionne un élément dans une zone nommée de la grille.
grid-auto-flow
Définit le mode de calcul automatique pour positionner les éléments dans la grille.
grid-auto-rows
Définit la hauteur par défaut des lignes dans une grille.
grid-column
Numéro(s) de(s) colonne(s) où doit se positionner cet élément dans la grille.
grid-column-end
Numéro de la colonne sur laquelle un élément doit venir se terminer (dans une grille).
grid-column-start
Numéro de la colonne sur laquelle doit commencer un élément dans une grille.
grid-row
Numéro(s) de(s) lignes) où doit se positionner cet élément dans la grille.
grid-row-end
Numéro de la ligne sur laquelle un élément doit venir se terminer (dans une grille).
grid-row-start
Numéro de la ligne sur laquelle doit commencer un élément dans une grille.
grid-template
Propriété résumée pour définir les largeurs de colonnes, la hauteur des lignes, et les plages d'une grille.
grid-template-areas
Définit les zones nommées dans une grille.
grid-template-columns
Définit le nombre et la largeur des colonnes d'une grille.
grid-template-rows
Définit le nombre et la hauteur des lignes d'une grille.

Fonctions :

minmax()
Renvoie une valeur comprise dans une fourchette, pour dimensionner la hauteur des lignes ou la largeur des colonnes d'une grille.
repeat()
Facilite la définition des lignes ou des colonnes d'une grille lorsqu'elles sont nombreuses.