Xüsusiyyət place-self

place-self xüsusiyyəti qriddə fərdi elementin şaquli və üfüqi oxlar üzrə düzülüşünü eyni anda təyin edir. Xüsusiyyətin qiymətində birinci nöqtə şaquli, ikinci nöqtə isə üfüqi ox üzrə düzülüşü göstərir. Bu xüsusiyyət düzülməsini istədiyimiz elementdə təyin olunur.

Sintaksis

element {
	place-self: şaquli üçün qiymət üfüqi üçün qiymət;
}

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: center start;
}

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

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: start end;
}

Nümunə . Şaquli oxun sonuna və üfüqi oxun mərkəzinə düzülüş

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}
#elem1 {
	place-self: end center;
}

Həmçinin bax

justify-self xüsusiyyəti,
qriddə fərdi elementin üfüqi ox üzrə düzülüşünü təyin edir
align-self xüsusiyyəti,
tək bir blokun düzülüşünü təyin edir