Uitlyning van inhoud op die horisontale as in CSS-rooster

In 'n rooster kan dit nie net nodig wees om inhoud te posisioneer nie, maar ook om dit langs die horisontale as van die rooster uit te lê. In hierdie geval gebruik ons die eienskap justify-content, wat in die ouerelement gespesifiseer word. Kom ons kyk na voorbeelde van hoe hierdie eienskap werk.

Aan die begin van die as

Laat ons die uitlyning vir ons elemente aan die begin van die horisontale as stel:

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

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

In die middel van die as

En nou, laat ons die uitlyning vir ons elemente in die middel van die horisontale as stel:

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

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

Aan die einde van die as

Kom ons stel die uitlyning vir ons elemente aan die einde van die horisontale as:

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

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

Praktiese take

Skep 'n rooster wat uit ses elemente bestaan, gerangskik in twee kolomme. Voer die uitlyning van elemente aan die begin van die horisontale rooster-as uit.

Rangskik nou die roosterelemente in drie kolomme en spesifiseer die uitlyning van elemente in die middel van die horisontale rooster-as.

Verander die vorige taak sodat die uitlyning van elemente aan die einde van die horisontale as plaasvind.