CSS გრიდის უჯრებში ელემენტების ორივე ღერძის გასწვრივ გასწორების შემოკლებული ფორმა

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

მოდით, ვნახოთ ამ თვისების მუშაობა მაგალითებზე.

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

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

#parent {
	display: grid;
	place-items: center start;
	grid-template-columns: 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;
	place-items: end center;
	grid-template-columns: 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;
	place-items: start end;
	grid-template-columns: 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;
}

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

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

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

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

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