Ausrichtung eines einzelnen Elements entlang der horizontalen Achse im CSS-Grid

Die Ausrichtung entlang der horizontalen Achse kann nicht nur im übergeordneten Element festgelegt werden, sondern auch für jedes untergeordnete Element einzeln. Zu diesem Zweck wird die Eigenschaft justify-self verwendet.

Am Anfang der horizontalen Achse

Lassen Sie uns die Ausrichtung für unser erstes Element auf den Anfang der horizontalen Achse setzen:

<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 der Mitte der horizontalen Achse

Lassen Sie uns die Ausrichtung des ersten Elements auf die Mitte der horizontalen Achse setzen:

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

Am Ende der horizontalen Achse

Lassen Sie uns die Ausrichtung für das erste Element auf das Ende der horizontalen Achse setzen:

<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 Aufgaben

Erstellen Sie ein Grid, das aus fünf Elementen besteht, angeordnet in zwei Reihen. Führen Sie die Ausrichtung des zweiten Elements am Anfang der horizontalen Achse durch.

Ordnen Sie nun die Elemente des Grids in drei Reihen an und legen Sie die Ausrichtung des dritten Elements in der Mitte der horizontalen Achse des Grids fest.

Ändern Sie die vorherige Aufgabe so, dass die Ausrichtung des fünften Elements am Ende der horizontalen Achse erfolgt.