Placement d'éléments Grid-row

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 32 sur 43.

La propriété grid-row vous permet de contrôler où un élément est placé verticalement dans une grille CSS. Elle spécifie sur quelle ligne commencer et terminer l'élément.

Avant de commencer, il est important de comprendre la différence entre les grid lines (lignes de grille) et les grid tracks (pistes de grille).

Les lignes de grille (grid lines) sont les lignes de division (numérotées 1, 2, 3, etc.) qui composent la structure de la grid. Une piste de grille (grid track) est l'espace situé entre deux grid lines adjacentes — essentiellement, la row ou la column elle-même.

Admettons que nous ayons un `container` simple avec 8 éléments, et que nous souhaitions que le premier élément s'étende de la `line` de `row` 1 à la `line` de `row` 4 dans le `grid` :

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

Voici à quoi cela ressemble :

Pour vous étendre sur plusieurs lignes, vous pouvez également utiliser le mot-clé span :

.item2 {
  grid-row: 2 / span 2;
  background-color: lightpink;
}

Cela place item2 en le faisant démarrer à la ligne de row 2 et s'étendre sur 2 rows (ou 2 tracks).

Défi

Facile

Utilisez la propriété grid-row pour faire en sorte que le quatrième élément de grille s'étende de la ligne de ligne 2 à la ligne de ligne 4.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 10px;
  background-color: dodgerblue;
  padding: 10px;
}

.grid-container > div {
  background-color: #f1f1f1;
  text-align: center;
  padding: 10px;
  font-size: 30px;
}
/* Add your CSS styles here */

</style>
</head>
<body>
<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>  
</div>

</body>
</html>