სვეტების რაოდენობა და სიგანე CSS გრიდებში

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

მაგალითი

ჯერ შევქმნათ მშობელი ელემენტი და გავხადოთ ის გრიდ-კონტეინერი. დავუშვათ, გვაქვს div, რომელშიც განთავსებულია ოთხი შვილი ელემენტი. მივანიჭოთ მას თვისებაში display მნიშვნელობა grid, ხოლო თვისებაში grid-template-columns ჩავწეროთ სიგანე ორი სვეტისთვის:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 200px 400px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

მაგალითი

ახლა კი შევქმნათ ცხრილი ოთხი სხვადასხვა ზომის სვეტით:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 250px;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

პრაქტიკული ამოცანები

დავუშვათ, გაქვთ div ცხრა შვილი ელემენტით. გახადეთ მშობელი ელემენტი გრიდ-კონტეინერი.

განათავსეთ შვილი ელემენტები ორ სვეტში, თითოეული 200px სიგანის.

განათავსეთ შვილი ელემენტები სამ სვეტში, თითოეული 150px სიგანის.

განათავსეთ შვილი ელემენტები სამ სვეტში: პირველი 100px სიგანის, მეორე 150px სიგანის, ხოლო მესამე 200px სიგანის.