Izlīdzināšana pa abām asīm CSS režģa šūnās

Var vienlaicīgi iestatīt elementu izlīdzināšanu režģa šūnās gan pa horizontālo, gan pa vertikālo asi. Šim nolūkam mēs varam kombinēt divas īpašības justify-items un align-items, kuras tiek iestatītas vecāka elementā.

Pa asu centriem

Izlīdzināsim mūsu elementus pa horizontālās un vertikālās asu centriem:

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

#parent {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Tagad apskatīsim mūsu režģu atkļūdotājā:

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

Izvietosim mūsu elementus šūnās pa horizontālās sākumu un vertikālās asu beigām:

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

#parent {
	display: grid;
	justify-items: start;
	align-items: end;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Tagad apskatīsim mūsu režģu atkļūdotājā:

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

Izvietosim mūsu elementus šūnās pa horizontālās beigām un vertikālās asu sākumu:

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

#parent {
	display: grid;
	justify-items: end;
	align-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: 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;
}

Tagad apskatīsim mūsu režģu atkļūdotājā:

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no pieciem elementiem, kas izvietoti trīs rindās. Veiciet elementu izlīdzināšanu šūnās pa horizontālās sākumu un vertikālās asu centriem.

Tagad izvietojiet režģa elementus divās rindās un iestatiet elementu izlīdzināšanu šūnās pa horizontālās centru un vertikālās asu sākumu.

Mainiet iepriekšējo uzdevumu, lai elementu izlīdzināšana notiktu pa horizontālās beigām un vertikālās asu centriem.