Eienskap grid-auto-columns

Die eienskap grid-auto-columns spesifiseer die aantal en wydte van kolomme 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 kolomme in enige eenhede vir groottes. Die eienskap word in die ouer-element gespesifiseer en bepaal die wydte van kolomme vir die kind-elemente.

Sintaksis

selektor {
	grid-auto-columns: kolomwydte;
}

Voorbeeld

Laat ons die wydte van kolomme spesifiseer vir ons elemente in die implisiete rooster:

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

Sien ook

die eienskap grid-auto-rows,
wat die aantal en hoogte van rye in die implisiete rooster spesifiseer
die eienskap grid-template-columns,
wat die aantal en wydte van kolomme in die rooster spesifiseer