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

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

ღერძის დასაწყისში

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

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

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

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

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

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

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