Uitlyning van 'n Individuele Element Op Die Horisontale As in CSS Rooster

Uitlyning op die horisontale as kan nie net in die ouerelement gestel word nie, maar ook vir elke afstammeling afsonderlik. Vir hierdie doel word die eienskap justify-self gebruik.

Aan die Begin van die Horisontale As

Laat ons die uitlyning vir ons eerste element op die begin van die horisontale as stel:

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

In die Middel van die Horisontale As

Laat ons die uitlyning van die eerste element op die middel van die horisontale as stel:

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

Aan die Einde van die Horisontale As

Laat ons die uitlyning vir die eerste element op die einde van die horisontale as stel:

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

Praktiese Take

Skep 'n rooster wat uit vyf elemente bestaan, geplaas in twee rye. Voer die uitlyning van die tweede element uit op die begin van die horisontale as.

Plaas nou die roosterelemente in drie rye en stel die uitlyning van die derde element in op die middel van die horisontale as van die rooster.

Verander die vorige taak, sodat die uitlyning van die vyfde element aan die einde van die horisontale as gebeur.