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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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