Eigenschap justify-items

De eigenschap justify-items bepaalt de uitlijning van elementen binnen gridcellen langs de horizontale as. De uitlijning is het meest duidelijk zichtbaar bij het bekijken van het grid in de browserdebugger. Wordt toegepast op het bovenliggende element.

Syntaxis

selector {
	justify-items: flex-start | flex-end | center ;
}

Waarden

Waarde	Beschrijving
`flex-start`	Elementen zijn tegen het begin van de horizontale as aangedrukt.
`flex-end`	Blokken zijn tegen het einde van de horizontale as aangedrukt.
`center`	Blokken staan in het midden van de horizontale as.

Voorbeeld . Uitlijning op het begin van de horizontale as

Laten we onze elementen uitlijnen binnen de cellen op 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;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}

Laten we nu naar ons grid kijken in de debugger:

Voorbeeld . Uitlijning in het midden van de horizontale as

Laten we onze elementen in de cellen in het midden van de horizontale as uitlijnen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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;
}

Na het aansluiten van de browserdebugger zullen we ons grid zien:

Voorbeeld . Uitlijning op het einde van de horizontale as

Laten we onze elementen uitlijnen op het einde 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;
	justify-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	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 via de debugger naar het grid kijken:

Zie ook

de eigenschap align-items,
die de uitlijning langs de dwarsas bepaalt
de eigenschap place-items,
die de uitlijning van elementen binnen gridcellen bepaalt