Xüsusiyyət place-items

place-items xüsusiyyəti sütun və sıraların eyni vaxtda düzülüşünü təyin edir, bu da istifadə etdiyimiz kodu əhəmiyyətli dərəcədə azaldır. Birinci dəyərlə elementin şaquli, ikinci dəyərlə isə üfüqi ox üzrə yerləşməsini təyin edirik. place-items xüsusiyyəti valideyn elementdə təyin olunur. place-items ilə işin yerinə yetirilməsini brauzerin debuggeri vasitəsilə izləmək rahatdır.

Sintaksis

selektor {
	place-items: üfüqi düzülüş dəyəri şaquli düzülüş dəyəri;
}

Nümunə . Şaquli oxun mərkəzi və üfüqi oxun başlanğıcı üzrə düzülüş

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Gəlin gridimizə brauzerin debuggeri vasitəsilə baxaq:

Nümunə . Şaquli oxun sonu və üfüqi oxun mərkəzi üzrə düzülüş

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

İndi isə debugger panelinə nəzər salaq:

Nümunə . Şaquli oxun başlanğıcı və üfüqi oxun sonu üzrə düzülüş

<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;
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Gəlin brauzerin debuggeri vasitəsilə elementlərin xanalar içərisində düzülüşünə baxaq:

Həmçinin bax

justify-items xüsusiyyəti,
grid xanalarının içindəki elementlərin üfüqi ox üzrə düzülüşünü təyin edir
align-items xüsusiyyəti,
çarpaz ox üzrə düzülüşü təyin edir