Eigenschap place-items

De eigenschap place-items bepaalt gelijktijdig de uitlijning van kolommen en rijen, wat de code die we gebruiken aanzienlijk verkort. Met de eerste waarde bepalen we de positionering van het element langs de verticale as, en met de tweede - langs de horizontale as. De eigenschap place-items wordt ingesteld in het bovenliggende element. Het is handig om het werken met place-items te bekijken via de debugger van de browser.

Syntaxis

selector {
	place-items: horizontale-uitlijningswaarde verticale-uitlijningswaarde;
}

Voorbeeld . Uitlijning in het midden van de verticale as en aan het begin van de horizontale as

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

Laten we ons grid bekijken via de browserdebugger:

Voorbeeld . Uitlijning aan het einde van de verticale as en in het midden van de horizontale as

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

Laten we nu eens kijken in het debugpaneel van de browser:

Voorbeeld . Uitlijning aan het begin van de verticale as en aan het einde van de horizontale as

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

Laten we de uitlijning van de elementen in de cellen bekijken met behulp van de browserdebugger:

Zie ook

de eigenschap justify-items,
die de uitlijning van elementen binnen gridcellen langs de horizontale as bepaalt
de eigenschap align-items,
die de uitlijning langs de kruisende as bepaalt