Placement d'éléments Grid-row

Fait partie de la section Maîtrise du CSS 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 l’élément doit commencer et se terminer.

Avant de commencer, il est important de comprendre la différence entre les lignes de la grille et les pistes de la grille.

Les lignes de la grille sont les lignes de séparation (numérotées 1, 2, 3, etc.) qui constituent la structure de la grille. Une piste de grille est l’espace entre deux lignes de grille adjacentes : il s’agit essentiellement de la ligne ou de la colonne elle-même.

Disons que nous avons un conteneur simple avec 8 éléments et que nous voulons que le premier élément s'étende de la ligne 1 à la ligne 4 dans la grille :

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

Voici à quoi cela ressemble :

Pour s’é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 commençant à la ligne 2 et en s’étendant sur 2 lignes (ou 2 pistes).

Défi

Facile

Utilisez la propriété grid-row pour faire s’étendre le quatrième élément de la grille de la ligne row 2 à la ligne row 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>