Justering af enkelt element langs den vandrette akse i CSS grid

Justering langs den vandrette akse kan indstilles ikke kun i forældreelementet, men også for hvert enkelt child-element. Til dette formål bruges egenskaben justify-self.

Ved starten af den vandrette akse

Lad os indstille justeringen for vores første element ved starten af den vandrette akse:

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

I midten af den vandrette akse

Lad os indstille justeringen af det første element i midten af den vandrette akse:

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

Ved enden af den vandrette akse

Lad os indstille justeringen for det første element ved enden af den vandrette akse:

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

Praktiske opgaver

Opret et grid, der består af fem elementer, placeret på to rækker. Udfør justering af det andet element ved starten af den vandrette akse.

Placer nu gridelementerne på tre rækker og indstil justeringen af det tredje element i midten af den vandrette akse i griddet.

Ændr den forrige opgave, så justeringen af det femte element sker ved enden af den vandrette akse.