CSS Grid-də hüceyrələrin içində hər iki ox üzrə düzləndirmə üçün qısa yazılış

place-items qısa yazılış xüsusiyyətindən istifadə edərək grid hüceyrələrinin içindəki elementləri hər iki ox üzrə eyni vaxtda düzləndirmək olar. Xüsusiyyət boşluqla ayrılmış iki dəyər qəbul edir. Birinci dəyərlə elementi şaquli, ikinci dəyərlə isə üfüqi ox üzrə yerləşdiririk. Xüsusiyyət valideyn elementdə təyin olunur.

Gəlin bu xüsusiyyətin işini nümunələr üzərində görək.

Şaquli mərkəz və üfüqi başlanğıc

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

#parent {
	display: grid;
	place-items: center 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 grid-imizə debugger-də baxaq:

Şaquli son və üfüqi mərkəz

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

#parent {
	display: grid;
	place-items: end 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 grid-imizə debugger-də baxaq:

Şaquli başlanğıc və üfüqi son

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

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

Gəlin grid-imizə debugger-də baxaq:

Praktiki tapşırıqlar

Altı elementdən ibarət bir grid yaradın və onları iki sütuna yerləşdirin. Elementləri grid-in üfüqi oxunda başlanğıca, şaquli oxunda isə mərkəzə düzləndirin.

İndi grid elementlərini üç sütuna yerləşdirin və elementlərin düzləndirilməsini grid-in həm üfüqi, həm də şaquli oxunda mərkəzə təyin edin.

Əvvəlki tapşırığı elə dəyişin ki, elementlərin düzləndirilməsi grid-in üfüqi oxunda sona, şaquli oxunda isə başlanğıca təyin olunsun.