Ausrichtung eines einzelnen Elements entlang beider Achsen eines CSS-Grids

Man kann ein einzelnes Element sowohl entlang der horizontalen als auch der vertikalen Achse ausrichten, indem man die Eigenschaften justify-self und align-self kombiniert.

Am Anfang der horizontalen und in der Mitte der vertikalen Achse

Lassen Sie uns die Ausrichtung für unser erstes Element auf den Anfang der horizontalen und die Mitte der vertikalen 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;
	align-self: center;
}

In der Mitte der horizontalen und am Anfang der vertikalen Achse

Lassen Sie uns nun die Ausrichtung des ersten Elements auf die Mitte der horizontalen und den Anfang der vertikalen 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;
	align-self: start;
}

Am Ende der horizontalen und in der Mitte der vertikalen Achse

Lassen Sie uns die Ausrichtung des ersten Elements auf das Ende der horizontalen und die Mitte der vertikalen 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;
	align-self: center;
}

Praktische Aufgaben

Erstellen Sie ein Grid, das aus sechs Elementen besteht, und ordnen Sie diese in zwei Reihen an. Führen Sie die Ausrichtung des zweiten Elements am Anfang der horizontalen und in der Mitte der vertikalen 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 und am Ende der vertikalen Achse fest.

Ändern Sie die vorherige Aufgabe so, dass die Ausrichtung des vierten Elements am Ende der horizontalen und in der Mitte der vertikalen Achse erfolgt.

Machen Sie es nun so, dass die Ausrichtung des fünften Elements am Anfang der horizontalen und am Anfang der vertikalen Achse erfolgt, und die des sechsten Elements - am Ende der horizontalen und in der Mitte der vertikalen Achse.