Satura izlīdzināšana pa abām asīm CSS režģī

Bieži vien režģī var būt nepieciešams vienlaicīgi izlīdzināt saturu gan pa horizontālo, gan vertikālo režģa asi. Šim nolūkam mēs varam kopīgi izmantot divas īpašības, kuras jūs apguvāt iepriekšējā nodarbībā: justify-content un align-content.

Pa vertikālās sākumu un horizontālās beigām

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

Pa vertikālās beigām un horizontālās sākumu

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

Pa vertikālās ass centru un horizontālo

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

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no sešiem elementiem un novietojiet tos divās kolonnās. Veiciet elementu izlīdzināšanu pa horizontālās sākumu un vertikālās ass centru režģī.

Tagad novietojiet režģa elementus trīs kolonnās un iestatiet elementu izlīdzināšanu pa horizontālās centru un vertikālās ass beigām režģī.

Mainiet iepriekšējo uzdevumu tā, lai elementu izlīdzināšana notiktu pa horizontālās beigām un vertikālās ass centru režģī.