CSS Grid xanaları içində hər iki ox üzrə düzülmə

Grid xanaları içindəki elementləri həm üfüqi, həm də şaquli oxlar üzrə eyni zamanda düzləmək mümkündür. Bu məqsədlə biz valideyn elementdə təyin olunan justify-items və align-items xassələrini birləşdirə bilərik.

Oxların mərkəzinə görə

Gəlin elementlərimizi üfüqi və şaquli oxların mərkəzinə görə düzləyək:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

İndi gridimizə debuggerdə baxaq:

Üfüqinin başlanğıcı və şaqulinin sonuna görə

Gəlin elementlərimizi xanalarda üfüqi oxun başlanğıcı və şaquli oxun sonuna görə yerləşdirək:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

İndi gridimizə debuggerdə baxaq:

Üfüqinin sonu və şaqulinin başlanğıcına görə

Gəlin elementlərimizi xanalarda üfüqi oxun sonu və şaquli oxun başlanğıcına görə yerləşdirək:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

İndi gridimizə debuggerdə baxaq:

Praktiki tapşırıqlar

Üç sıradan ibarət, beş elementli bir grid yaradın. Elementləri xanalar içində üfüqi oxun başlanğıcı və şaquli oxun mərkəzinə görə düzləyin.

İndi grid elementlərini iki sıra üzrə yerləşdirin və xanalar içindəki elementlərin düzülməsini üfüqi oxun mərkəzinə və şaquli oxun başlanğıcına görə təyin edin.

Əvvəlki tapşırığı elementlərin düzülməsinin üfüqi oxun sonuna və şaquli oxun mərkəzinə görə baş verməsi üçün dəyişin.