Justering inom CSS-gridceller längs den horisontella axeln

För att justera element inom gridceller, d.v.s. de områden som uppstår vid skärningspunkten mellan kolumner och rader, används egenskapen justify-items, som anges i förälderelementet. Justeringen syns tydligast när man granskar griddet i webbläsarens utvecklarverktyg.

Längs axelns start

Låt oss justera våra element inuti cellerna längs den horisontella axelns start:

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#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 utvecklarverktyget:

Längs axelns centrum

Låt oss justera våra element i cellerna till mitten av den horisontella axeln:

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

#parent {
	display: grid;
	justify-items: center;
	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;
}

Låt oss nu titta på vårt grid i utvecklarverktyget:

Längs axelns slut

Låt oss justera våra element längs den horisontella axelns slut:

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

#parent {
	display: grid;
	justify-items: end;
	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;
}

Låt oss nu titta på vårt grid i utvecklarverktyget:

Praktiska uppgifter

Skapa ett grid som består av fem element, placerade över tre rader. Utför justering av elementen längs den horisontella axeln.

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

Ändra den föregående uppgiften, så att justering av elementen sker längs den horisontella axelns slut.