Justering af enkeltelement på begge akser i CSS-grid

Du kan justere et enkelt element samtidigt på både den vandrette og den lodrette akse ved at kombinere egenskaberne justify-self og align-self.

Ved start på vandret og centrum på lodret

Lad os indstille justeringen for vores første element til start på den vandrette akse og centrum på den lodrette 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;
	align-self: center;
}

Ved centrum på vandret og start på lodret

Lad os nu indstille justeringen for det første element til centrum på den vandrette og start på den lodrette 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;
	align-self: start;
}

Ved slut på vandret og centrum på lodret

Lad os indstille justeringen af det første element til slut på den vandrette og centrum på den lodrette 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;
	align-self: center;
}

Praktiske opgaver

Opret et grid, der består af seks elementer og placer dem i to rækker. Udfør justering af det andet element ved start på den vandrette akse og centrum på den lodrette akse.

Placer nu grid-elementerne i tre rækker og indstil justeringen af det tredje element ved centrum på den vandrette akse og slut på den lodrette akse.

Ændr den forrige opgave, så justeringen af det fjerde element sker ved slut på den vandrette akse og centrum på den lodrette akse.

Gør nu sådan, at justeringen af det femte element sker ved start på den vandrette akse og start på den lodrette akse, og det sjette element - ved slut på den vandrette akse og centrum på den lodrette akse.