Anzahl und Breite der Zeilen in CSS Grids

Grid-Elemente können auch in Zeilen angeordnet werden. Dafür ist die Eigenschaft grid-template-rows zuständig. Diese Eigenschaft akzeptiert die Größen der Zeilen durch Leerzeichen getrennt. Hier können die gleichen Werte verwendet werden, die wir auch für Spalten kennengelernt haben.

Beispiel

Lassen Sie uns als Beispiel die Blöcke in vier Zeilen anordnen:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 50px 100px 50px 50px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Beispiel

Legen wir für die erste und dritte Zeile eine feste Breite in Pixeln fest, und lassen Sie die zweite Zeile den verbleibenden Platz einnehmen:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: 100px auto 60px;
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Beispiel

Verwenden wir die Funktion repeat um die Größen der Zeilen anzugeben:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Beispiel

Weisen wir den Zeilen eine Höhe von 50px zu, und lassen Sie die Anzahl der Zeilen automatisch mit dem Wert auto-fill festlegen:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

css#parent {
  display: grid;
  grid-template-rows: repeat(auto-fill, 50px);
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
  height: 200px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Praktische Aufgaben