Inhoud uitvulling op beide asse in CSS-rooster

Dikwels in 'n rooster mag jy dit nodig hê om die inhoud gelyktydig langs die horisontale en vertikale asse van die rooster uit te vul. Vir hierdie doel kan ons die twee eienskappe gesamentlik gebruik wat jy in die vorige les oorweeg het: justify-content en align-content.

Volgens die begin van die vertikale en einde van die horisontale

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-start;
	grid-template-columns: 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;
}

Volgens die einde van die vertikale en begin van die horisontale

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-end;
	grid-template-columns: 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;
}

Volgens die middel van die vertikale as en horisontale as

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: center;
	grid-template-columns: 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;
}

Praktiese take

Skep 'n rooster wat uit ses elemente bestaan en plaas hulle in twee kolomme. Voer die uitvulling van elemente uit volgens die begin van die horisontale as en die middel van die vertikale asse van die rooster.

Plaas nou die roosterelemente in drie kolomme en stel die uitvulling van elemente in volgens die middel van die horisontale as en die einde van die vertikale asse van die rooster.

Verander die vorige taak, sodat die uitvulling van elemente plaasvind volgens die einde van die horisontale as en die middel van die vertikale asse van die rooster.