Properti grid-auto-columns

Properti grid-auto-columns mengatur jumlah dan lebar kolom yang akan ditempati oleh elemen dalam grid implisit. Grid implisit - grid yang dibuat secara otomatis ketika elemen keluar dari batas grid yang sudah ditetapkan. Dalam nilai properti, kita tentukan lebar kolom dalam satuan untuk ukuran apapun. Properti ditentukan dalam elemen induk dan mengatur lebar kolom dari elemen-elemen turunan.

Sintaksis

selector {
	grid-auto-columns: lebar kolom;
}

Contoh

Mari kita atur lebar kolom untuk elemen-elemen kita dalam grid implisit:

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

Lihat juga

properti grid-auto-rows,
yang mengatur jumlah dan lebar baris dalam grid implisit
properti grid-template-columns,
yang mengatur jumlah dan lebar kolom dalam grid