Justering av individuelle elementer langs den horisontale aksen i CSS grid

Justering langs den horisontale aksen kan angis ikke bare i foreldreelementet, men også for hvert enkelt barneelement. For dette formålet brukes egenskapen justify-self.

Ved starten av den horisontale aksen

La oss sette justeringen for vårt første element til starten av den horisontale aksen:

<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 senter av den horisontale aksen

La oss sette justeringen for det første elementet i senter av den horisontale aksen:

<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 slutten av den horisontale aksen

La oss sette justeringen for det første elementet til slutten av den horisontale aksen:

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

Opprett et grid som består av fem elementer, plassert på to rader. Utfør justering av det andre elementet ved starten av den horisontale aksen.

Plasser nå gridelementene på tre rader og angi justering av det tredje elementet i senter av den horisontale aksen til gridet.

Endre den forrige oppgaven, så justering av det femte elementet skjer ved slutten av den horisontale aksen.