Grid-row Elementplatzierung

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 32 von 43.

Die Property grid-row ermöglicht es Ihnen zu steuern, wo ein Element vertikal in einem CSS Grid platziert wird. Sie gibt an, in welcher Zeile das Element beginnen und enden soll.

Bevor wir eintauchen, ist es wichtig, den Unterschied zwischen grid lines und grid tracks zu verstehen.

Grid-Linien sind die Trennlinien (nummeriert mit 1, 2, 3 usw.), die die Grid-Struktur bilden. Ein Grid-Track ist der Raum zwischen zwei benachbarten Grid-Linien—im Wesentlichen die Zeile oder Spalte selbst.

Nehmen wir an, wir haben einen einfachen Container mit 8 Elementen und möchten, dass das erste Element von Rasterzeile 1 bis Rasterzeile 4 im Raster reicht:

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

So sieht es aus:

Um sich über mehrere Zeilen zu erstrecken, können Sie auch das Schlüsselwort span verwenden:

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

Dies platziert item2 beginnend bei row line 2 und erstreckt sich über 2 rows (oder 2 tracks).

Aufgabe

Einfach

Verwende die grid-row-Eigenschaft, damit das vierte Grid-item von Row-line 2 bis Row-line 4 reicht.

Probier es selbst

<!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>