Eigenschap grid-auto-rows

De eigenschap grid-auto-rows bepaalt het aantal en de breedte van de rijen die een element in het impliciete grid zal innemen. Impliciet grid - een grid dat automatisch wordt gemaakt wanneer elementen buiten de grenzen van het reeds gedefinieerde grid vallen. In de waarde van de eigenschap specificeren we de breedte van de rijen in willekeurige eenheden voor afmetingen. De eigenschap wordt gespecificeerd in het ouder-element en bepaalt de breedte van de rijen van de kind-elementen.

Syntaxis

cssselector {
  grid-auto-rows: rijbreedte;
}

Voorbeeld

Laten we de breedte van de rijen voor onze elementen in het impliciete grid instellen:

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

Результат:

Zie ook