Właściwość place-items

Właściwość place-items ustawia jednoczesne wyrównanie kolumn i wierszy, co znacznie skraca używany przez nas kod. Pierwszą wartością ustawiamy położenie elementu wzdłuż osi pionowej, a drugą - wzdłuż osi poziomej. Właściwość place-items jest ustawiana na elemencie rodzicu. Pracę z place-items wygodnie jest śledzić za pomocą debuggera przeglądarki.

Składnia

selektor {
	place-items: wartość wyrównania w poziomie wartość wyrównania w pionie;
}

Przykład . Wyrównanie do środka osi pionowej i początku osi poziomej

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

Spójrzmy na naszą siatkę przez debugger przeglądarki:

Przykład . Wyrównanie do końca osi pionowej i środka osi poziomej

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

A teraz zajrzyjmy do panelu debuggera:

Przykład . Wyrównanie do początku osi pionowej i końca osi poziomej

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

Spójrzmy na wyrównanie elementów w komórkach za pomocą debuggera przeglądarki:

Zobacz też

właściwość justify-items,
która ustawia wyrównanie elementów wewnątrz komórek siatki wzdłuż osi poziomej
właściwość align-items,
która ustawia wyrównanie wzdłuż osi poprzecznej