Propriété CSS grid-template-rows

Définition et utilisation

grid-template-rows définit le nombre de lignes (et la hauteur) dans la mise en page en grille.

Les valeurs sont une liste séparée par des espaces, où chaque valeur spécifie la hauteur de la ligne correspondante.

Voir également :

Tutoriel CSS :Mise en page en grille CSS

Manuel de référence CSS :Attribut grid-columns

Manuel de référence CSS :Attribut grid-template

Exemple

Définir la taille de la rangée (hauteur) :

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

Essayez-le vous-même

Syntaxe CSS

grid-template-rows: none|auto|max-content|min-content|length|initial|inherit;

Valeur de l'attribut

Valeur Description
none Taille non définie. Créez une ligne si nécessaire.
auto La taille de la ligne dépend de la taille du conteneur et de la taille du contenu des éléments dans la ligne.
max-content Définir la taille de chaque ligne en fonction de la plus grande taille de l'élément dans la ligne.
min-content Définir la taille de chaque ligne en fonction de la plus petite taille de l'élément dans la ligne.
length Définir la taille de la ligne en utilisant des valeurs de longueur légitimes. ConsultezUnités de longueur.

Détails techniques

Valeur par défaut : none
Héritage : Non
Réalisation des animations : Prise en charge. Voir également :Propriétés liées aux animations.
Version : Module de mise en page de grille CSS niveau 1
Syntaxe JavaScript : object.style.gridTemplateRows="50px 200px"

Prise en charge du navigateur

Les nombres dans le tableau indiquent la première version de navigateur qui prend en charge cette propriété en totalité.

Chrome IE / Edge Firefox Safari Opera
57 16 52 10 44