CSS გრიდის უჯრებში ელემენტების ჰორიზონტალური ღერძის მიმართ გასწორება

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

ღერძის დასაწყისის მიმართ

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

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#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>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	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;
}

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

ღერძის დასასრულის მიმართ

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

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

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

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

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

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

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