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 :

CSS - Propriété grid-auto-rows

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

grid-auto-rows définit la hauteur par défaut des lignes d'une grille. Cela ne concerne que les lignes dont la hauteur n'est pas définie explicitement par la propriété grid-template-rows.

Exemple 1 - Grille dont la hauteur des lignes n'est pas définie spécifiquement.

La grille ci-dessous comporte deux lignes dont la hauteur est celle définie par défaut par la propriété grid-auto-rows, soit 50 pixels.

Exemple 2 - Grille dont la hauteur de toutes les lignes est définie.

La hauteur des deux lignes de cette grille a été fixée à 20 pixels avec grid-template-rows : la valeur donnée à grid-auto-rows n'est pas utilisée.

Exemple 3 - Grille comportant des lignes additionnelles.

Dans la grille ci-dessous, il y a deux éléments de plus que ne peuvent en contenir les deux lignes définies par grid-template-rows. La ou les lignes supplémentaires auront la hauteur définie par grid-auto-rows, soit 50 pixels.

Exemple 4 - Grille comportant des éléments positionnés.

Dans cette dernière grille, un élément a été forcé en ligne 4 par sa propriété grid-row:4. Les deux lignes supplémentaires auront la hauteur définie par grid-auto-rows, soit 50 pixels. Remarque: la troisième ligne ne contient pas d'élément mais sa hauteur est bien de 50 pixels.

Voir aussi...

Consultez également la page sur la propriété grid-template-rows qui permet de définir la hauteur des lignes explicitement, et qui est prioritaire sur grid-auto-rows, ainsi que la page grid pour une présentation générale des grilles.

Syntaxes pour grid-auto-rows.

  • grid-auto-rows: auto;

    Valeur par défaut. La hauteur des lignes, lorsqu'elle n'est pas explicitement indiquée, est déterminée par rapport à leur contenu.

  • grid-auto-rows: max-content;

    La hauteur des lignes, lorsqu'elle n'est pas explicitement indiquée, est déterminée par le contenu le plus long trouvé dans la ligne, sans retours à la ligne.

  • grid-auto-rows: min-content;

    La hauteur des lignes, lorsqu'elle n'est pas explicitement indiquée, est déterminée par le contenu rendu le plus court possible en insérant les retours à la ligne nécessaires.

  • grid-auto-rows: 100px;

    La hauteur des lignes est fixée à cette valeur. Ce doit être un nombre positif suivi d'une unité de dimension. Voir les unités de dimensions en CSS.

    Les pourcentages sont calculés par rapport à la hauteur de la grille. Si cette dernière n'est pas définie, l'utilisation des pourcentages est déconseillée.

  • grid-auto-rows: initial;

    La valeur initiale est auto.

  • grid-auto-rows: unset; grid-auto-rows: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Pour la grille ci-dessous, la propriété grid-template-rows n'a pas été définie : la hauteur des lignes est donc celle par défaut, déterminée par la propriété grid-auto-rows.

grid-auto-rows :
Langage C : un des plus anciens langages de programmation.
Java : versatile et robuste.
SQL : la quatrième génération.
Javascript : interprété et reconnu par tous les navigateurs.
Python : le couteau suisse du développeur.
PHP : un des plus anciens langage coté serveur.
HTML : langage à balises.
CSS : mise en forme et en page.
Visual Basic : de chez Microsoft.

Prise en charge par les navigateurs (compatibilité).

La prise en charge des grilles est globalement assez bonne, sauf pour 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.

Afficher les versions antérieures   Afficher la version à venir  

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis 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-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • minmax() : Renvoie une valeur comprise dans une fourchette.
  • repeat() : Répète une valeur un certain nombre de fois.