Grid-row Elementplatzierung

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

Mit der Eigenschaft grid-row kannst du steuern, wo ein Element vertikal in einem CSS Grid platziert wird. Sie legt fest, in welcher Zeile das Element beginnt und endet.

Bevor wir eintauchen, ist es wichtig, den Unterschied zwischen Rasterlinien und Rasterspuren zu verstehen.

Rasterlinien sind die Trennlinien (nummeriert mit 1, 2, 3 usw.), aus denen die Rasterstruktur besteht. Eine Rasterspur ist der Bereich zwischen zwei benachbarten Rasterlinien: im Wesentlichen also die Zeile oder Spalte selbst.

Angenommen, wir haben einen einfachen Container mit 8 Elementen und möchten, dass sich das erste Element im Raster von der Zeilenlinie 1 bis zur Zeilenlinie 4 erstreckt:

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

So sieht es aus:

Um mehrere Zeilen zu überspannen, kannst du auch das Schlüsselwort span verwenden:

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

Dadurch wird item2 in Zeile 2 platziert und erstreckt sich über 2 Zeilen (oder 2 Tracks).

Aufgabe

Einfach

Verwende die Eigenschaft grid-row, damit sich das vierte Rasterelement von Rasterlinie 2 bis Rasterlinie 4 erstreckt.

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>