place-items Özelliği

place-items özelliği, sütun ve satırların aynı anda hizalanmasını sağlar, bu da kullandığımız kodu önemli ölçüde kısaltır. İlk değerle öğenin dikey eksendeki, ikinci değerle de yatay eksendeki konumunu belirleriz. place-items özelliği ebeveyn öğede belirtilir. place-items ile çalışmanın sonuçlarını tarayıcı hata ayıklayıcısı üzerinden izlemek uygundur.

Sözdizimi

seçici {
	place-items: yatay hizalama değeri dikey hizalama değeri;
}

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

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

Grid'imize tarayıcı hata ayıklayıcısı üzerinden bir bakalım:

Örnek . Dikey eksende sona ve yatay eksende ortaya hizalama

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

Şimdi de hata ayıklayıcı paneline bir göz atalım:

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

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

Hücreler içindeki öğelerin hizalanmasına tarayıcı hata ayıklayıcısı üzerinden bakalım:

Ayrıca Bakınız

justify-items özelliği,
grid hücreleri içindeki öğelerin yatay eksende hizalanmasını belirler
align-items özelliği,
çapraz eksende hizalamayı belirler