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

selector {
	grid-auto-columns: kolombreedte;
}

Voorbeeld

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

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

#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

de eigenschap grid-auto-rows,
die het aantal en de hoogte van rijen in een impliciet grid bepaalt
de eigenschap grid-template-columns,
die het aantal en de breedte van kolommen in een grid bepaalt