თვისება grid-auto-rows

თვისება grid-auto-rows აზუსტებს რიგების რაოდენობას და სიგანეს, რომელსაც ელემენტი დაიკავებს არამკაფიო გრიდში. არამკაფიო გრიდი - გრიდი, რომელიც იქმნება ავტომატურად, როდესაც ელემენტები გადიან უკვე განსაზღვრული გრიდის ფარგლებს გარეთ. თვისების მნიშვნელობაში ჩვენ მივუთითებთ რიგების სიგანეს ნებისმიერ ზომის ერთეულში. თვისება მიუთითება მშობელ ელემენტში და განსაზღვრავს შვილობილი ელემენტების რიგების სიგანეს.

სინტაქსი

სელექტორი {
	grid-auto-rows: რიგის სიგანე;
}

მაგალითი

მოდით, ავუღწეროთ ჩვენი ელემენტების რიგების სიგანე არამკაფიო გრიდში:

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

ასევე იხილეთ

თვისება grid-auto-columns,
რომელიც აზუსტებს სვეტების რაოდენობას და სიგანეს არამკაფიო გრიდში
თვისება grid-template-rows,
რომელიც აზუსტებს რიგების რაოდენობას და სიგანეს გრიდში