Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Mode de calcul des colonnes 'auto' dans une grille.
Statut
Standard
Type de valeur
Dimension+ | Pourcentage+ | Contenu
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:: CRD (document proposé pour la recommandation)

Statut du document:: CRD (document proposé pour la recommandation)

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

Syntaxe de grid-auto-rowsSchéma syntaxique de la propriété CSS grid-auto-rows (hauteur des lignes dans une grille). auto auto length / % / fr length / % / fr min-content min-content max-content max-content fit-content fit-content fct() fct()grid-auto-rows:;grid-auto-rows:;Télécharger l'image en SVG
  • 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é 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.

  • 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.

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

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.


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.

1
grid-auto-rows
2
grid-auto-columns
Estimation de la prise en charge en pourcentage du parc actuel.
93%
93%

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.

Propriétés.

Propriété raccourcis définissant les principaux paramètres d'une grille.
Positionne un élément dans une zone nommée de la grille.
Mode de calcul de l'emplacement des éléments dans la grille.
Mode de calcul de la hauteur 'auto' des lignes dans une grille.
Numéro de colonne(s) d'un élément dans une grille.
Numéro de la colonne de fin d'un élément dans une grille.
Numéro de la colonne de début d'un élément dans une grille.
Numéro des lignes d'un élément dans une grille.
Numéro de la ligne de fin d'un élément dans une grille.
Numéro de la ligne de départ d'un élément dans une grille.
Largeur des colonnes et hauteur des lignes d'une grille.
Définition de zones nommées dans une grille
Définition du nombre et de la largeur des colonnes d'une grille.
Définition du nombre et de la hauteur des lignes d'une grille.

Fonctions.

Renvoie une valeur comprise dans une fourchette.
Répète une valeur un certain nombre de fois.