შიგთავსის გასწორება ორივე ღერძზე CSS ღრიდში

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

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

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

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

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

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

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

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

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

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

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