Свойство place-items

Свойство place-items бир вақтнинг ўзида устунлар ва қаторларни текислашни белгилаб беради, бу эса биз ишлатаётган кодни сезарли қисқартиради. Биринчи қиймат билан биз элементнинг вертикал, иккинчиси билан эса горизантал ўқлар бўйича жойлашувини белгилаймиз. Свойство place-items ота-элементда белгиланади. place-items билан ишловчи жараённи браузернинг отладчиги орқали кўриб чиқиш қулай.

Синтаксис

селектор {
	place-items: горизантал бўйича текислаш қиймати вертикал бўйича текислаш қиймати;
}

Мисол . Вертикал ўқ бўйича марказ ва горизантал ўқ бўйича бошланиш нуқтасига текислаш

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

Келинг, бизнинг гридни браузернинг отладчиги орқали кўриб чиқайлик:

Мисол . Вертикал ўқ бўйича охир ва горизантал ўқлар бўйича марказга текислаш

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

Энди эса отладчик панелига назар солайлик:

Мисол . Вертикал ўқ бўйича бошланиш ва горизантал ўқ бўйича охирга текислаш

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

Келинг, браузернинг отладчиги ёрдамида ячейкалар ичидаги элементларнинг текисланишини кўриб чиқайлик:

Шунингдек қаранг

свойство justify-items,
у грид ячейкалари ичидаги элементларни горизантал ўқ бўйича текислашни белгилайди
свойство align-items,
у кўндаланг ўқ бўйича текислашни белгилайди