grid-auto-rows Özelliği

grid-auto-rows özelliği, örtük gridde bir elemanın kaplayacağı satırların sayısını ve genişliğini belirler. Örtük grid - zaten tanımlanmış gridin dışına çıkan elemanlar olduğunda otomatik olarak oluşturulan griddir. Özelliğin değeri olarak, satır genişliklerini herhangi bir boyut birimi ile belirtiriz. Özellik, ebeveyn elemana uygulanır ve çocuk elemanların satır genişliklerini belirler.

Sözdizimi

seçici {
	grid-auto-rows: satır genişliği;
}

Örnek

Örtük gridimizdeki elemanlarımız için satır genişliklerini belirleyelim:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
	<div id="elem5">5</div>
</div>

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

Ayrıca Bakınız

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