CSS Grid-də ayrı bir elementin üfüqi ox üzrə düzülüşü

Üfüqi ox üzrə düzülüşü təkcə ana element üçün deyil, həm də hər bir övlad üçün ayrıca təyin etmək olar. Bu məqsədlə justify-self xassəsi istifadə olunur.

Üfüqi oxun başlanğıcına görə

Gəlin birinci elementimiz üçün düzülüşü üfüqi oxun başlanğıcına görə təyin edək:

<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;
}

Üfüqi oxun mərkəzinə görə

Gəlin birinci elementin düzülüşünü üfüqi oxun mərkəzinə görə təyin edək:

<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;
}

Üfüqi oxun sonuna görə

Gəlin birinci element üçün düzülüşü üfüqi oxun sonuna görə təyin edək:

<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;
}

Praktiki tapşırıqlar

Iki sıra üzrə yerləşən beş elementdən ibarət grid yaradın. Ikinci elementin düzülüşünü üfüqi oxun başlanğıcına görə təyin edin.

Indi grid elementlərini üç sıra üzrə yerləşdirin və üçüncü elementin düzülüşünü gridin üfüqi oxunun mərkəzinə görə təyin edin.

Əvvəlki tapşırığı elə dəyişin ki, beşinci elementin düzülüşü üfüqi oxun sonuna görə olsun.