Justering längs båda axlarna inuti CSS-gridets celler

Det är möjligt att samtidigt ange justering av element inuti gridets celler både längs den horisontella och den vertikala axeln. För detta ändamål kan vi kombinera de två egenskaperna justify-items och align-items, som anges i förälderelementet.

I mitten av axlarna

Låt oss justera våra element i mitten av den horisontella och vertikala axeln:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

Låt oss nu titta på vårt grid i inspektören:

Vid början av den horisontella och slutet av den vertikala

Låt oss placera våra element i cellerna vid början av den horisontella och slutet av den vertikala axeln:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

Låt oss nu titta på vårt grid i inspektören:

Vid slutet av den horisontella och början av den vertikala

Låt oss placera våra element i cellerna vid slutet av den horisontella och början av den vertikala axeln:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 100px 100px;
	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;
}

Låt oss nu titta på vårt grid i inspektören:

Praktiska uppgifter

Skapa ett grid, bestående av fem element, placerade över tre rader. Utför justering av elementen i cellerna vid början av den horisontella och mitten av den vertikala axeln.

Placera nu gridelementen över två rader och ange justering av elementen inuti cellerna i mitten av den horisontella och början av den vertikala axeln.

Ändra den föregående uppgiften, så att justering av elementen sker vid slutet av den horisontella och mitten av den vertikala axeln.