Eigenschaft grid-auto-rows

Die Eigenschaft grid-auto-rows legt die Anzahl und Höhe der Zeilen fest, die ein Element im impliziten Grid einnehmen wird. Implizites Grid - ein Grid, das automatisch erstellt wird, wenn Elemente über den Rahmen des bereits definierten Grids hinausgehen. Im Wert der Eigenschaft geben wir die Zeilenhöhen in beliebigen Einheiten für Größen an. Die Eigenschaft wird im übergeordneten Element angegeben und bestimmt die Höhe der Zeilen der untergeordneten Elemente.

Syntax

cssSelektor {
  grid-auto-rows: Zeilenhöhe;
}

Beispiel

Lassen Sie uns die Zeilenhöhe für unsere Elemente im impliziten Grid festlegen:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
  <div id="elem5">5</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-auto-rows: 40px 60px 80px;
  border: 2px solid #696989;
  padding: 10px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Siehe auch