Egenskapen place-items

Egenskapen place-items anger samtidig justering av kolumner och rader, vilket avsevärt minskar koden vi använder. Med det första värdet sätter vi placeringen av elementet längs den vertikala axeln, och med det andra - längs den horisontella axeln. Egenskapen place-items anges i förälderelementet. Det är bekvämt att granska utförandet av place-items via webbläsarens debugger.

Syntax

selektor {
	place-items: horisontellt justeringsvärde vertikalt justeringsvärde;
}

Exempel . Justering till mitten av den vertikala axeln och början av den horisontella axeln

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

Låt oss titta på vårt grid via webbläsarens debugger:

Exempel . Justering till slutet av den vertikala axeln och mitten av den horisontella axeln

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

Och låt oss nu titta i debuggerpanelen:

Exempel . Justering till början av den vertikala axeln och slutet av den horisontella axeln

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

Låt oss titta på justeringen av element i celler med hjälp av webbläsarens debugger:

Se även

egenskapen justify-items,
som anger justering av element inuti grid-celler längs den horisontella axeln
egenskapen align-items,
som anger justering längs den tväraxeln