grid-auto-columns Özelliği

grid-auto-columns özelliği, örtük gridde bir öğenin kaplayacağı sütunların sayısını ve genişliğini belirler. Örtük grid, öğeler zaten tanımlanmış gridin sınırlarının dışına çıktığında otomatik olarak oluşturulan griddir. Özelliğin değerinde, sütun genişliklerini herhangi bir boyut birimiyle belirtiriz. Özellik ebeveyn öğede belirtilir ve çocuk öğelerin sütun genişliklerini tanımlar.

Sözdizimi

seçici {
	grid-auto-columns: sütun genişliği;
}

Örnek

Örtük gridimizdeki öğelerimiz için sütun genişliklerini belirleyelim:

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

Ayrıca Bakınız

örtük gridde sıra sayısını ve genişliğini belirleyen grid-auto-rows özelliği
gridde sütun sayısını ve genişliğini belirleyen grid-template-columns özelliği