Egenskaben place-items

Egenskaben place-items angiver samtidig justering af kolonner og rækker, hvilket betydeligt reducerer den kode, vi bruger. Med den første værdi angiver vi placeringen af elementet langs den vertikale akse, og med den anden - langs den horisontale akse. Egenskaben place-items angives i forælderelementet. Det er praktisk at gennemgå arbejdet med place-items via browserens debugger.

Syntaks

selector {
	place-items: horisontal justeringsværdi vertikal justeringsværdi;
}

Eksempel . Justering i midten af den vertikale akse og starten af den horisontale akse

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

Lad os se på vores grid via browserens debugger:

Eksempel . Justering i slutningen af den vertikale akse og midten af den horisontale akse

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

Og lad os nu kigge i debuggerens panel:

Eksempel . Justering i starten af den vertikale akse og slutningen af den horisontale akse

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

Lad os se på justeringen af elementer i cellerne ved hjælp af browserens debugger:

Se også

egenskaben justify-items,
som angiver justering af elementer inde i grid-celler langs den horisontale akse
egenskaben align-items,
som angiver justering langs den transversale akse