CSS Grid-də xanaların daxilində şaquli ox üzrə düzülmə

Grid xanalarının daxilindəki elementləri şaquli ox üzrə düzləmək üçün biz valideyn elementdə təyin olunan align-items xassəsindən istifadə edirik. Bu xassənin işini brauzerin debuggerində gridə baxarkən görmək olar.

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

Gəlin elementlərimizi xanaların daxilində şaquli 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;
	align-items: 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;
}

Gəlin gridimizə brauzerin debuggerində baxaq:

Oxun mərkəzinə görə

İndi isə elementlərimizi xanalarda şaquli 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;
	align-items: 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;
}

Gəlin gridimizə brauzerin debuggerində baxaq:

Oxun sonuna görə

Elementlərin düzülməsini bir daha dəyişək, bu dəfə şaquli oxun sonuna görə:

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

#parent {
	display: grid;
	align-items: 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;
}
#elem1 {
	
}

Gəlin gridimizə brauzerin debuggerində baxaq:

Praktiki tapşırıqlar

İki sütundan ibarət, altı elementli bir grid yaradın. Elementləri xanaların daxilində şaquli oxun başlanğıcına görə düzün.

İndi grid elementlərini üç sütuna yerləşdirin və elementlərin xanalarda gridin şaquli oxunun mərkəzinə görə düzülməsini təyin edin.

Əvvəlki tapşırığı elə dəyişin ki, elementlərin düzülməsi şaquli oxun sonuna görə baş versin.