Īsinājums izlīdzināšanai šūnās abās asīs CSS režģī

Ar īpašības saīsinājuma place-items palīdzību var vienlaikus izlīdzināt elementus režģa šūnās abās asīs. Īpašība pieņem divas vērtības, atdalītas ar atstarpi. Ar pirmo vērtību mēs iestatām elementa izvietojumu vertikālajā, bet ar otro - horizontālajā asī. Īpašība tiek iestatīta vecāka elementā.

Apskatīsim šīs īpašības darbību ar piemēriem.

Vertikālās centrā un horizontālās sākumā

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

#parent {
	display: grid;
	place-items: center 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;
}

Apskatīsim mūsu režģi atkļūdotājā:

Vertikālās beigās un horizontālās centrā

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

#parent {
	display: grid;
	place-items: end 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;
}

Apskatīsim mūsu režģi atkļūdotājā:

Vertikālās sākumā un horizontālās beigās

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

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

Apskatīsim mūsu režģi atkļūdotājā:

Praktiskie uzdevumi

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

Tagad izvietojiet režģa elementus trīs kolonnās un iestatiet elementu izlīdzināšanu horizontālās ass centrā un vertikālās ass centrā.

Mainiet iepriekšējo uzdevumu tā, lai elementu izlīdzināšana notiktu horizontālās ass beigās un vertikālās ass sākumā.