CSS ქსელის უჯრებში ორივე ღერძის გასწორება

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

ღერძების ცენტრში

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

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

ახლა ვნახოთ ჩვენი ქსელი დებაგერში:

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

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

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

ახლა ვნახოთ ჩვენი ქსელი დებაგერში:

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

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

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

ახლა ვნახოთ ჩვენი ქსელი დებაგერში:

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

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

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

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