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

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

სინტაქსი

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

მაგალითი

მოდით, ჩვენმა ელემენტებისთვის არაცხად გრიდში სვეტების სიგანე მივუთითოთ:

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

ასევე იხილეთ

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