Egenskapen place-items

Egenskapen place-items angir samtidig justering av kolonner og rader, noe som betydelig reduserer koden vi bruker. Med den første verdien angir vi plassering av elementet langs den vertikale aksen, og med den andre - langs den horisontale aksen. Egenskapen place-items angis i foreldreelementet. Det er praktisk å se hvordan place-items fungerer via nettleserens debugger.

Syntaks

selector {
	place-items: horisontal justeringsverdi vertikal justeringsverdi;
}

Eksempel . Justering til senter av vertikalakse og start av horisontalakse

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

La oss se på grid-en vår via nettleserens debugger:

Eksempel . Justering til slutt av vertikalakse og senter av horisontalakse

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

La oss nå se i debugger-panelet:

Eksempel . Justering til start av vertikalakse og slutt av horisontalakse

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

La oss se på justeringen av elementer i celler ved hjelp av nettleserens debugger:

Se også

egenskapen justify-items,
som angir justering av elementer inne i grid-celler langs horisontalaksen
egenskapen align-items,
som angir justering langs kryssaksen