grid-row CSS propriété

Définition de la CSS grid-row.

La propriété de Grid CSS grid-row est raccourci qui permet de spécifier la position de début et de fin de ligne d'un élément au sein de son conteneur Grid Css.

Exemple de syntaxe CSS grid-row :
grid-row : auto / 2;
grid-row : 1 / 2 ;
grid-row : Identifiant / Identifiant ;
grid-row : span 3 / 4;

La propriété de feuille de style grid-row CSS peut prendre une valeur de chaque propriété de Grid Css suivante :

  • : spécifie la position du début de la ligne de l'élément.
  • : spécifie la position de la fin de la ligne de l'élément.
La propriété de feuille de style grid-row CSS peut prendre la valeur seule de :
  • auto : met à auto l'ensemble des propriétés Css de Grille citées ci-dessus. Valeur par défaut.

Conditions d'application de la CSS grid-row.

La propriété de feuille de style grid-row CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont un élément "Item Grid" d'un conteneur Grid de type display:[inline-]grid.

Héritage des valeurs Css de grid-row.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style grid-row.

Conditions d'animation de grid-row en CSS3.

La CSS grid-row est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Propriétés CSS utilisées dans le raccourci grid-row.

Spécifier les propriétés de la ligne individuellement

Si vous ne voulez pas utiliser le raccourci de Grid Css grid-row, vous pouvez définir individuellement chaque propriété Css de début ou de fin de ligne Css d'un élément en utilisant une des propriétés de Grid CSS suivante :

Exemple d'écriture CSS de propriétés de la ligne spécifiées individuellement :
.identifiant{
  grid-row-start : 1;
  grid-row-end : 2; 
}

Règles de syntaxes CSS pour grid-row.

Règle d'écriture de grid-row

Les valeurs assignées à la propriété de Grid CSS grid-row doivent être séparées par un slash (/) et l'ordre a de l'importance.

Exemple d'écriture CSS de grid-row :
grid-row : grid-row-start / grid-row-end

Vous pouvez mettre qu'une valeur, dans ce cas :

  • si la valeur que vous avez mise est un Identifiant, alors ce dernier est aussi appliqué à la propriété de Grille Css grid-row-end.
  • sinon, c'est cela revient à préciser un grid-row-end à auto

Compatibilités navigateurs de la propriété grid-row

Votre avis sur la définition grid-row en CSS

Votez pour la définition CSS grid-row

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/grid-row-css.html Votes: 5 / 5 - 3 votes
Cliquez sur une étoile pour voter.