ცალკეული ელემენტის გასწორება ორივე ღერძზე CSS Grid-ში

ცალკეული ელემენტის გასწორება შესაძლებელია ერთდროულად ჰორიზონტალურადაც და ვერტიკალურადაც justify-self და align-self თვისებების კომბინირებით.

ჰორიზონტალური ღერძის დასაწყისზე და ვერტიკალური ღერძის ცენტრში

დავსეტოთ ჩვენი პირველი ელემენტის გასწორება ჰორიზონტალური და ვერტიკალური ღერძების დასაწყისზე:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

ჰორიზონტალური ღერძის ცენტრში და ვერტიკალური ღერძის დასაწყისზე

ახლა დავსეტოთ პირველი ელემენტის გასწორება ჰორიზონტალური ღერძის ცენტრში და ვერტიკალური ღერძის დასაწყისზე:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

ჰორიზონტალური ღერძის ბოლოში და ვერტიკალური ღერძის ცენტრში

დავსეტოთ პირველი ელემენტის გასწორება ჰორიზონტალური ღერძის ბოლოში და ვერტიკალური ღერძის ცენტრში:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

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

შექმენით grid, რომელიც შედგება ექვსი ელემენტისგან და განათავსეთ ისინი ორ რიგში. შეასრულეთ მეორე ელემენტის გასწორება ჰორიზონტალური ღერძის დასაწყისზე და ვერტიკალური ღერძის ცენტრში.

ახლა განათავსეთ ელემენტები grid-ში სამი რიგით და დაასეტეთ მესამე ელემენტის გასწორება ჰორიზონტალური ღერძის ცენტრში და ვერტიკალური ღერძის ბოლოში.

შეცვალეთ წინა ამოცანა ისე, რომ მეოთხე ელემენტის გასწორება მოხდეს ჰორიზონტალური ღერძის ბოლოში და ვერტიკალური ღერძის ცენტრში.

ახლა გახადეთ ისე, რომ მეხუთე ელემენტის გასწორება მოხდეს ჰორიზონტალური ღერძის დასაწყისზე და დასაწყისზე ვერტიკალური ღერძის, ხოლო მეექვსე ელემენტის - ჰორიზონტალური ღერძის ბოლოში და ვერტიკალური ღერძის ცენტრში.