Eigenschap grid-auto-columns

De eigenschap grid-auto-columns bepaalt het aantal en de breedte van de kolommen die een element in een impliciet grid zal innemen. Impliciet grid - een grid dat automatisch wordt aangemaakt wanneer elementen buiten de grenzen van het reeds gedefinieerde grid vallen. In de waarde van de eigenschap specificeren we de breedte van de kolommen in willekeurige eenheden voor afmetingen. De eigenschap wordt opgegeven in het ouder-element en bepaalt de breedte van de kolommen van de kindelementen.

Syntaxis

cssselector {
  grid-auto-columns: kolombreedte;
}

Voorbeeld

Laten we de kolombreedte instellen voor onze elementen in het impliciete grid:

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

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

Результат:

Zie ook