CSS Grid xanaları daxilində üfüqi ox üzrə düzülmə

Grid xanaları daxilində, yəni sütun və sıraların kəsişməsində yaranan sahələrdə elementləri düzmək üçün valideyn elementdə təyin olunan justify-items xassəsindən istifadə olunur. Düzülməni ən aydın şəkildə brauzerin debug qurğusunda gridə baxarkən müşahidə etmək olar.

Oxun başlanğıcına görə

Gəlin elementlərimizi xanalar daxilində üfüqi oxun başlanğıcına görə düzək:

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

İndi gəlin gridimizə debug qurğusunda baxaq:

Oxun mərkəzinə görə

Gəlin elementlərimizi xanalar daxilində üfüqi oxun mərkəzinə görə düzək:

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

İndi gəlin gridimizə debug qurğusunda baxaq:

Oxun sonuna görə

Gəlin elementlərimizi üfüqi oxun sonuna görə düzək:

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

İndi gəlin gridimizə debug qurğusunda baxaq:

Praktiki tapşırıqlar

Beş elementdən ibarət, üç sıra üzrə yerləşən bir grid yaradın. Elementlərin üfüqi ox üzrə düzülməsini həyata keçirin.

İndi grid elementlərini iki sıra üzrə yerləşdirin və xanalar daxilində elementlərin üfüqi oxun mərkəzinə görə düzülməsini təyin edin.

Elementlərin düzülməsinin üfüqi oxun sonuna görə baş verməsi üçün əvvəlki tapşırığı dəyişin.