Uitlijning van een individueel element langs de horizontale as van een CSS-grid

Uitlijning langs de horizontale as kan niet alleen in het bovenliggende element worden ingesteld, maar ook voor elke afzonderlijke descendant. Voor dit doel wordt de eigenschap justify-self gebruikt.

Aan het begin van de horizontale as

Laten we de uitlijning voor ons eerste element instellen op het begin van de horizontale as:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: start;
}

In het midden van de horizontale as

Laten we de uitlijning van het eerste element instellen op het midden van de horizontale as:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: center;
}

Aan het einde van de horizontale as

Laten we de uitlijning voor het eerste element instellen op het einde van de horizontale as:

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

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	grid-gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	justify-self: end;
}

Praktische taken

Maak een grid bestaande uit vijf elementen, gerangschikt in twee rijen. Voer de uitlijning van het tweede element uit op het begin van de horizontale as.

Rangschik de elementen van het grid nu in drie rijen en stel de uitlijning van het derde element in op het midden van de horizontale as van het grid.

Wijzig de vorige taak, zodat de uitlijning van het vijfde element plaatsvindt aan het einde van de horizontale as.