place-self Özelliği

place-self özelliği, grid içindeki tek bir elemanın hem dikey hem de yatay eksenlerde aynı anda hizalanmasını belirler. Özelliğin değerinde ilk olarak dikey hizalama, ikinci olarak ise yatay hizalama belirtilir. Bu özellik, hizalamak istediğimiz elemana tanımlanır.

Sözdizimi

eleman {
	place-self: dikey-değer yatay-değer;
}

Örnek . Dikey eksende ortaya ve yatay eksende başa hizalama

<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;
}

Örnek . Dikey eksende başa ve yatay eksende sona hizalama

<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;
}

Örnek . Dikey eksende sona ve yatay eksende ortaya hizalama

<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;
}

Ayrıca Bakınız

justify-self özelliği,
grid'de tek bir elemanın yatay eksende hizalanmasını belirler
align-self özelliği,
tek bir bloğun hizalanmasını belirler