Belynning binne CSS-rooster-selle op die horisontale as

Om elemente binne roosterselle uit te lijn, d.w.s. gebiede wat ontstaan by die kruising van kolomme en rye, word die eienskap justify-items gebruik, wat in die ouerelement gespesifiseer word. Die belynning is die duidelikste wanneer die rooster in die blaaier se ontfoutingsprogram bekyk word.

Volgens die begin van die as

Laat ons ons elemente binne die selle volgens die begin van die horisontale as belyn:

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

Laat ons nou na ons rooster kyk in die ontfoutingsprogram:

Volgens die middel van die as

Laat ons ons elemente in die selle volgens die middel van die horisontale as belyn:

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

Laat ons nou na ons rooster kyk in die ontfoutingsprogram:

Volgens die einde van die as

Laat ons ons elemente volgens die einde van die horisontale as belyn:

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

Laat ons nou na ons rooster kyk in die ontfoutingsprogram:

Praktiese take

Skep 'n rooster wat uit vyf elemente bestaan, geplaas oor drie rye. Voer die belynning van elemente op die horisontale as uit.

Plaas nou die roosterelemente oor twee rye en spesifiseer dat elemente in selle volgens die middel van die horisontale as gebelyn moet word.

Wysig die vorige taak, sodat die belynning van elemente volgens die einde van die horisontale as plaasvind.