Uitlijning van inhoud langs de horizontale as in CSS Grid

In Grid kan het niet alleen nodig zijn om inhoud te positioneren, maar ook om deze uit te lijnen langs de horizontale as van het grid. In dat geval gebruiken we de eigenschap justify-content, die wordt ingesteld in het bovenliggende element. Laten we met voorbeelden bekijken hoe deze eigenschap werkt.

Aan het begin van de as

Laten we de uitlijning voor onze elementen instellen 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-content: start;
	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;
}

In het midden van de as

Laten we nu de uitlijning voor onze elementen instellen op het midden 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-content: center;
	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;
}

Aan het einde van de as

Laten we de uitlijning voor onze elementen instellen 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-content: end;
	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;
}

Praktische opdrachten

Maak een grid bestaande uit zes elementen, gerangschikt in twee kolommen. Voer de uitlijning van de elementen uit op het begin van de horizontale as van het grid.

Plaats de gridelementen nu in drie kolommen en stel de uitlijning van de elementen in op het midden van de horizontale as van het grid.

Pas de vorige opdracht zo aan, dat de uitlijning van de elementen plaatsvindt aan het einde van de horizontale as.