Grid-row Elementplatzierung

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

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

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

.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 Zeilenlinie 2 und erstreckt sich über 2 Zeilen.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Verwenden Sie die grid-row-Eigenschaft, damit sich das vierte Grid-Element von Zeilenlinie 2 bis Zeilenlinie 4 erstreckt.

Spickzettel

Die Eigenschaft grid-row steuert, wo ein Element vertikal in einem CSS-Grid platziert wird, und gibt an, in welcher Zeile das Element beginnen und enden soll.

Grundlegende Syntax:

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

Beispiel für eine Ausdehnung von Zeilenlinie 1 bis Zeilenlinie 4:

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

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

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

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>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.