Prescurtare pentru alinierea în interiorul celulelor pe ambele axe în Grid CSS

Cu ajutorul proprietății prescurtate place-items se pot alinia simultan elementele în interiorul celulelor gridului pe ambele axe. Proprietatea acceptă două valori, separate prin spațiu. Cu prima valoare stabilim poziționarea elementului pe axa verticală, iar cu a doua - pe axa orizontală. Proprietatea se stabilește în elementul-părinte.

Să analizăm funcționarea acestei proprietăți cu exemple.

Pe centrul vertical și începutul orizontal

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Să ne uităm la gridul nostru în instrumentul de dezvoltare:

Pe sfârșitul vertical și centrul orizontal

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Să ne uităm la gridul nostru în instrumentul de dezvoltare:

Pe începutul vertical și sfârșitul orizontal

<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;
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Să ne uităm la gridul nostru în instrumentul de dezvoltare:

Sarcini practice

Creați un grid format din șase elemente și poziționați-le în două coloane. Efectuați alinierea elementelor pe începutul axei orizontale și centrul axei verticale a gridului.

Acum poziționați elementele gridului în trei coloane și stabiliți alinierea elementelor pe centrul axei orizontale și centrul axei verticale a gridului.

Modificați sarcina anterioară astfel încât alinierea elementelor să aibă loc pe sfârșitul axei orizontale și începutul axei verticale a gridului.