Својството 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;
}

Ајде да го погледнеме нашиот grid преку дебагерот на прелистувачот:

Пример . Подредување по крај на вертикалната и центар на хоризонталната оска

<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,
кое го задава подредувањето на елементите во ќелиите на grid по хоризонталната оска
својството align-items,
кое го задава подредувањето по попречната оска