Propriété grid-row de CSS

Définition et utilisation

L'attribut grid-row détermine la taille de l'élément de grille et sa position dans la mise en page en grille, c'est une abréviation des propriétés suivantes :

Voir également :

Tutoriel CSS :Mise en page en grille CSS

Exemple

Exemple 1

Faites en sorte que "item1" commence à la ligne 1 et couvre deux lignes :

.item1 {
  grid-row: 1 / span 2;
}

Essayez-le vous-même

Exemple 2

Vous pouvez utiliser la valeur de la ligne de rangée pour remplacer le nombre de lignes à couvrir :

.item1 {
  grid-row: 1 / 3;
}

Essayez-le vous-même

Syntaxe CSS

grid-row: grid-row-start / grid-row-end;

Valeur de l'attribut

Valeur Description
grid-row-start Détermine à partir de quelle ligne commencer à afficher les éléments.
grid-row-end Détermine sur quelle ligne de rangée arrêter l'affichage des éléments, ou couvrir combien de lignes.

Détails techniques

Valeur par défaut : auto / auto
Héritage : Non
Création d'animation : Supporté. Voir :Propriétés liées aux animations。
Version : Module de mise en page en grille CSS niveau 1
Syntaxe JavaScript : object.style.gridRow="2 / span 2"

Support 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