La propriété CSS grid-row est un raccourci permettant de spécifier les lignes de la grille où un élément de la grille commence et se termine dans une mise en page de type grille, et ce en une seule déclaration.

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.grid-item:nth-child(2) {
  grid-row: 2 / 4; /* Commence à la deuxième ligne de rangée et se termine à la quatrième ligne de rangée */
}

En raison du comportement de placement automatique par défaut de la grille CSS, le deuxième élément enfant de la grille dans cet exemple devrait normalement être placé dans la première rangée de la deuxième colonne de la grille. Mais nous déclarons une rangée de grille (grid-row) et la définissons de manière à aligner le bord de départ de l'item de grille sur la deuxième ligne de grille et son bord d'arrivée sur la quatrième ligne de la grille, ce qui déplace l'élément de la grille.

Propriétés constitutives

La propriété grid-row est une abréviation qui combine deux propriétés : grid-row-start et grid-row-end.

Syntaxe

grid-row: <grid-line> [ / <grid-line> ]?;

Définition complète

<grid-line> =
  auto |
  <custom-ident> |
  [ [ <integer [−∞,−1]> | <integer [1,∞]> ] && <custom-ident>? ] |
  [ span && [ <integer [1,∞]> || <custom-ident> ] ]

• Valeur initiale : auto
• S'applique aux items de la grille et aux boîtes positionnées de manière absolue dont le bloc contenant est un conteneur de grille
• Héritée : non
• Valeur calculée : telle que spécifiée pour ses propriétés développées
• Type d'animation : discrète

Cette propriété peut prendre deux valeurs séparées par une barre oblique (/). La valeur précédant la barre oblique définit la propriété de début de ligne de la grille, tandis que la valeur suivant la barre oblique définit la propriété de fin de ligne de la grille. Il est possible de déclarer une seule valeur sans la barre oblique, qui s'applique à la propriété "grid-row-start" et qui définit la propriété "grid-row-end" à "auto".

Valeurs

/* Keyword value */
grid-row: auto;

/* <custom-ident> value */
grid-row: myLineName;
grid-row: myGridArea;
grid-row: header-start / main-end;

/* <integer> + <custom-ident> values */
grid-row: 3;
grid-row: 2 / -3;
grid-row: main 2;
grid-row: 3 line / 5 line;

/* span + <integer> + <custom-ident> values */
grid-row: span 3;
grid-row: span 2 / 5;
grid-row: 1 / span myline;
grid-row: 2 / span gridline 3;

/* Global values */
grid-row: inherit;
grid-row: initial; /* same as `auto` */
grid-row: revert;
grid-row: revert-layer;
grid-row: unset;

auto

Il s'agit de la valeur par défaut. Elle indique la portée (span) par défaut (1) et le comportement de placement automatique, ce qui signifie que l'élément de la grille est automatiquement placé dans la prochaine cellule vide disponible.

<custom-ident>

Cette syntaxe permet d'utiliser soit un nombre entier pour faire référence à une ligne de grille numérotée, soit une chaîne de caractères pour faire référence à une ligne de grille nommée ou à une zone de grille nommée. En d'autres termes, il est possible de spécifier une ligne de grille par son index numérique ou par son nom pour le bord de départ et le bord d'arrivée d'un élément de la grille.

Positionnement des éléments par numéro de ligne

Chaque piste de la grille est précédée et suivie de deux lignes de grille auxquelles un indice numérique est attribué automatiquement, en commençant par le numéro un.

Dans le premier exemple de cet article, nous avons utilisé cette syntaxe pour désigner la deuxième ligne de la grille par son indice (2), ce qui aligne le bord initial de l'élément de la grille sur le bord initial de la deuxième ligne, tandis que son bord final est aligné sur la quatrième ligne à l'aide de la syntaxe :

.grid-item:nth-child(2) {
  grid-row: 2 / 4;
}

Notez que vous pouvez également utiliser un nombre négatif pour faire référence à une ligne de la grille, mais il compte à partir du bord final de la grille. Le code suivant indique les mêmes lignes de la grille que dans l'exemple précédent, mais en comptant à l'envers :

.grid-item:nth-child(2) {
  grid-row: -3 / -1;

  /* identique à : */
  grid-row: 2 / 4;
  grid-row: 2 / -1;
  grid-row: -3 / 4;
}

Remarquez que les nombres entiers négatifs ont été assignés à notre grille, de même que les nombres positifs :

Positionnement des éléments par nom de ligne

On peut attribuer un nom personnalisé à une ligne de la grille en utilisant les propriétés de la grille de placement basée sur les lignes grid-template-columns et grid-template-rows pour faire référence à cette ligne par son nom.

Reprenons notre exemple et nommons toutes ses lignes de suivi des rangées comme dans la déclaration suivante :

.grid {
  display: grid;
  grid-template-rows: [first] 100px [second] 100px [third] 100px [last];
  grid-template-columns: 1fr 1fr 1fr;
}

On peut se référer à la deuxième et à la quatrième ligne par les noms personnalisés au lieu de leur index :

.grid-item:nth-child(2) {
  grid-row: second / last; /* same as index numbers 2 / 4 */
}

Notez que le "custom-ident" ne peut pas prendre la valeur "span". span est un mot-clé réservé aux propriétés de placement de la grille (par exemple, `grid-row : 1 / span 2`).

Positionnement des éléments en fonction des zones de la grille

Lorsqu'on définit des zones de grille à l'aide de la propriété grid-template-areas, on obtient gratuitement des noms de ligne implicites basés sur le nom des zones. Par exemple, une zone de grille portant le nom "content" génère une ligne nommée "content-start" avant elle et une autre nommée "content-end" après elle. On peut se référer à ces lignes pour définir la position d'un élément de la grille.

.grid-item:nth-child(2) {
  grid-row: content-start / content-end;
}

On peut également se référer au nom de la zone pour positionner un élément à la ligne de début et de fin de la zone de contenu nommée :

.grid-item:nth-child(2) {
  grid-row: content;
}

Voici un exemple complet :

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

body {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  grid-template-areas:
    'header'
    'content'
    'footer';
}

main {
  grid-row: content;
}

Ceci définit la position de l'élément <main>, qui sera dans la zone content de notre grille.

<integer> && <custom-ident>

Cette syntaxe permet de positionner les éléments de la grille en fonction des lignes de la grille lorsque les noms sont répétés. Si plusieurs lignes de la grille portent le même nom, cette syntaxe permet de préciser à laquelle de ces lignes on fait référence.

.grid {
  display: grid;
  grid-template-rows: [bar] 100px [foo] 100px [bar] 150px [bar];
}

Supposons qu'on veuille choisir la troisième ligne, mais que cette ligne porte le même nom que la première et la dernière ligne de la grille — elles s'appellent toutes bar. Puisque la deuxième ligne nommée bar est la troisième ligne de la grille, on peut utiliser 2 pour la sélectionner comme point de départ :

.grid-item:nth-child(2) {
  grid-row: 2 bar; /* The second `bar` named line which is the third line */

  /* This is equivalent to */
  grid-row-start: 2 bar;
  grid-row-end: auto;
}

Remarquez que l'ordre n'a aucune importance. Le code précédent peut aussi s'écrire :

.grid-item:nth-child(2) {
  grid-row: bar 2;
}

Comme pour la syntaxe précédente, on peut utiliser un nombre entier négatif pour compter les lignes de la grille à partir du bord final de la grille. Dans notre exemple, si nous voulons nous référer à la première barre, nous pouvons compter à partir du bord final de notre grille et l'écrire comme suit :

.grid-item:nth-child(2) {
  grid-row: -3 bar;
}

Notez que la valeur entière ne peut pas être égale à zéro.

span && [ <integer> || <custom-ident> ]

Cette syntaxe permet à un élément de la grille de s'étendre sur les pistes de la grille. Elle peut être spécifiée de trois manières différentes.

Notez que la valeur par défaut est 1 si l'entier n'est spécifié nulle part dans cette syntaxe.

span <integer>

L'utilisation du mot-clé span suivi d'un nombre entier indique le nombre de pistes qu'un élément de grille couvre à partir d'une ligne de grille spécifique. Par exemple, si nous voulons qu'un élément de grille s'étende sur trois pistes de ligne vers son bord final, nous pouvons appliquer la valeur suivante :

.grid-item:nth-child(2) {
  grid-row: 1 / span 3;
}

span <custom-ident>

Il est également possible de combiner le mot-clé span avec le nom d'une ligne de la grille pour que l'élément de la grille s'étende jusqu'à ce qu'il atteigne la ligne spécifiée.

.grid-item:nth-child(3) {
  grid-row: 3 / span lastline;
}

Comme la ligne de départ de l'élément de la grille est connue (3), nous pouvons étendre (span) l'élément jusqu'à ce qu'il atteigne une ligne de la grille nommée lastline.

span <custom-ident> <integer>

Si le nom de la ligne de grille spécifié est attribué à plus d'une ligne de grille - en d'autres termes, si nous avons plusieurs lignes de grille nommées - nous devons indiquer celles que nous voulons cibler. Pour ce faire, nous pouvons ajouter un nombre entier à notre valeur en spécifiant la ligne de grille à laquelle nous faisons référence.

Prenons l'exemple de la grille suivante :

.grid-container {
  display: grid;
  grid-template-rows: [y] 50px [x] 50px [x] 50px [y] 50px [x] 50px [x];
  grid-template-columns: 1fr 1fr;
}

.grid-item:nth-child(2) {
  grid-row: 2 / span x 2; /* equivalent to grid-row-end: 5; */
}

Nous fixons la ligne de départ de l'élément de grille à la deuxième ligne. Ensuite, nous voulons qu'il s'étende vers l'avant jusqu'à ce qu'il atteigne une ligne de la grille nommée "x". Et comme nous voulons qu'il s'agisse de la deuxième ligne de la grille x, nous obtenons span x 2.

Résultat, notre élément de grille s'étend à partir de la deuxième ligne, comme illustré ci-dessous. La première ligne qu'il atteint est la première, x, suivie de y, et enfin, il atteint la deuxième ligne souhaitée, nommée x.

Cette syntaxe est utile lorsqu'on souhaite étendre un élément de la grille vers une ligne de la grille en utilisant son nom. Comme nous savons qu'il y a plus d'une ligne de grille portant ce même nom, nous ajoutons un entier pour dire que nous voulons le Nième de cette ligne de grille.

Exemples

Des barres d'histogrammes flottantes

Beaucoup considèrent CSS Grid comme un outil permettant de créer la structure principale et la mise en page d'une page web ou d'une application, mais Grid est capable de bien plus que cela.

Prenons l'exemple du graphique suivant. Si vous regardez de près, vous pouvez voir que chaque barre s'étend d'une certaine ligne à une autre pour montrer l'étendue qui est censée marquer le graphique.

Si l'on considère le graphique comme une grille, on voit à quel point il est facile de spécifier la taille et la position des barres à l'aide des propriétés de placement de la grille CSS :

Pour créer une grille pour ce graphique, nous pouvons écrire le code suivant :

.chart {
  display: grid;
  grid-template-columns: repeat(10, 40px);
  grid-template-rows: repeat(9, 40px);
  gap: 0 8px;
}

Nous devons maintenant placer toutes les barres dans les bonnes lignes et colonnes :

.bar:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.bar:nth-child(2) {
  grid-column: 2;
  grid-row: 5 / 10;
}

/* ... */

.bar:nth-child(10) {
  grid-column: 10;
  grid-row: 9 / 10;
}

Jetez un coup d'œil à cette démo et voyez comment le reste s'articule :

voir Floating Bar Chart with CSS Grid de seyedi dans CodePen

Empiler des items grid

Lorsque nous positionnons des éléments dans la grille, nous pouvons les empiler ou les faire se chevaucher. Cela nous permet parfois d'utiliser la grille CSS comme alternative au positionnement absolu. Par exemple, nous pouvons placer un calque de légende au-dessus d'une image sans utiliser la propriété de position, comme illustré ci-dessous :

<figure>
  <img src="image.png" alt="how dare you leave alt empty?">
  <figcaption>The caption of our image</figcaption>
</figure>

figure {
  display: grid;
}

img,
figcaption {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

Et voilà le résultat :

Par défaut, les éléments de la grille s'empilent dans l'ordre de la source, mais vous pouvez contrôler leur niveau à l'aide de la propriété z-index. Dans l'exemple suivant, certains éléments se chevauchent et nous utilisons la propriété z-index pour placer le deuxième élément au niveau le plus élevé dans le contexte d'empilement :

.item:nth-child(2) {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  z-index: 1;
}

Accessibilité

Une chose à noter lors de l'utilisation des propriétés de placement de la grille est le problème causé par le réarrangement des éléments. Lorsque vous modifiez la position d'un élément, seul l'ordre visuel des éléments de la grille change, et cet ordre peut être différent de l'ordre original du document (HTML). Cela peut entraîner une très mauvaise expérience pour une personne parcourant le document à l'aide d'un clavier ou écoutant un lecteur d'écran qui lit le contenu dans le même ordre que le code HTML.

Il faut donc éviter de modifier l'ordre des éléments de la grille lorsque l'ordre HTML des éléments est important. Par exemple, cela peut être intéressant pour une galerie d'images aléatoires, mais sans doute pas pour les entrées de votre formulaire.

Toutefois, à l'heure où nous écrivons ces lignes, il existe une proposition visant à résoudre ce problème] qui, nous l'espérons, sera résolu à l'avenir.

Démo

Vous pouvez modifier la valeur des propriétés de placement de la grille dans la démo pour voir ce qu'il advient du troisième élément de la grille :

voir Grid item placement with shorthands de seyedi dans CodePen