Eienskap grid-auto-rows

Die eienskap grid-auto-rows spesifiseer die aantal en wydte van rye wat 'n element in die implisiete rooster sal beset. Implisiete rooster - 'n rooster wat outomaties geskep word wanneer elemente buite die grense van die reeds gedefinieerde rooster val. In die waarde van die eienskap spesifiseer ons die wydte van die rye in enige eenhede vir groottes. Die eienskap word in die ouer-element gespesifiseer en bepaal die wydte van die rye van die kind-elemente.

Sintaksis

cssselektor {
  grid-auto-rows: rywydte;
}

Voorbeeld

Kom ons spesifiseer die wydte van rye vir ons elemente in die implisiete rooster:

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;
}

Результат:

Sien ook