place-items xususiyati

place-items xususiyati ustunlar va qatorlarning bir vaqtning o‘zida tekislanishini belgilab beradi, bu biz ishlatadigan kodni sezilarli darajada qisqartiradi. Birinchi qiymat bilan biz elementning vertikal o‘q bo‘yicha, ikkinchisi bilan esa gorizontal o‘q bo‘yicha joylashishini belgilaymiz. place-items xususiyati ota-elementda belgilanadi. place-items bilan ishlash jarayonini brauzerning debuggeri orqali kuzatish qulay.

Sintaksis

selector {
	place-items: gorizontal tekislash qiymati vertikal tekislash qiymati;
}

Misol . Vertikal o‘q markazi va gorizontal o‘q boshiga tekislash

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

Keling, gridimizni brauzer debuggeri orqali ko‘rib chiqamiz:

Misol . Vertikal o‘q oxiri va gorizontal o‘q markaziga tekislash

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

Endi esa debugger paneliga tashlaymiz ko‘zimizni:

Misol . Vertikal o‘q boshiga va gorizontal o‘q oxiriga tekislash

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

Keling, brauzer debuggeri yordamida elementlarning kataklar ichidagi tekislanishini ko‘rib chiqamiz:

Shuningdek qarang

justify-items xususiyati,
bu grid kataklari ichidagi elementlarni gorizontal o‘q bo‘yicha tekislashni belgilaydi
align-items xususiyati,
bu ko‘ndalang o‘q bo‘yicha tekislashni belgilaydi