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 l'emplacement vertical d'un élément dans une grille CSS. Elle spécifie sur quelle ligne l'élément doit commencer et se terminer.

Supposons que nous ayons un conteneur simple avec 8 éléments, et que nous voulions que le premier élément s'étende de la ligne de rangée 1 à la ligne de rangée 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;
}

Ceci place item2 en commençant à la ligne de rangée 2 et en s'étendant sur 2 rangées.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.

Défi

Facile

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

Aide-mémoire

La propriété grid-row contrôle l'emplacement vertical d'un élément dans une grille CSS, en spécifiant sur quelle ligne de rangée l'élément commence et se termine.

Syntaxe de base :

.item {
  grid-row: start-line / end-line;
}

Exemple s'étendant de la ligne de rangée 1 à la ligne de rangée 4 :

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

Vous pouvez également utiliser le mot-clé span pour s'étendre sur plusieurs rangées :

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

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>

Testez-vous

Cette leçon comprend un petit quiz. Commencez la leçon pour y répondre et suivre votre progression.