Justering av enskilt element längs båda axlarna i CSS-grid

Det är möjligt att justera ett enskilt element både horisontellt och vertikalt genom att kombinera egenskaperna justify-self och align-self.

Längs horisontell start och vertikal centrering

Låt oss ställa in justeringen för vårt första element längs starten på den horisontella axeln och centrera det vertikalt:

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

Längs horisontell centrering och vertikal start

Låt oss nu ställa in justeringen för det första elementet till centrerat horisontellt och start på den vertikala axeln:

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

Längs horisontell slut och vertikal centrering

Låt oss ställa in justeringen för det första elementet längs slutet på den horisontella axeln och centrera det vertikalt:

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

Praktiska uppgifter

Skapa ett grid som består av sex element och placera dem i två rader. Justera det andra elementet längs starten på den horisontella axeln och centrera det vertikalt.

Placera nu gridelementen i tre rader och ställ in justeringen för det tredje elementet till centrerat horisontellt och slutet på den vertikala axeln.

Ändra den föregående uppgiften, så att justeringen för det fjärde elementet sker längs slutet på den horisontella axeln och centrering vertikalt.

Gör nu så att justeringen för det femte elementet sker längs starten på den horisontella och starten på den vertikala axeln, och för det sjätte elementet - längs slutet på den horisontella axeln och centrerat vertikalt.