Īsa pieraksta forma atsevišķa elementa izlīdzināšanai CSS režģī

Var vienlaicīgi izlīdzināt atsevišķu elementu gan horizontāli, gan vertikāli. Šim nolūkam tiek izmantota īpašība place-self. Tā pieņem divas vērtības, atdalītas ar atstarpi. Pirmā vērtība norāda izlīdzināšanu vertikāli, bet otrā - horizontāli. Apskatīsim piemērus.

Vertikāli centrā un horizontāli sākumā

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

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

Vertikāli sākumā un horizontāli beigās

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

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

Vertikāli beigās un horizontāli centrā

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

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

Praktiskie uzdevumi

Izveidojiet režģi, kas sastāv no pieciem elementiem un novietojiet tos trīs rindās. Veiciet pirmā elementa izlīdzināšanu horizontāli sākumā un vertikāli centrā.

Izmainiet iepriekšējo uzdevumu tā, lai trešā elementa izlīdzināšana notiktu horizontāli beigās un vertikāli centrā.

Tagad novietojiet režģa elementus divās rindās un iestatiet piektā elementa izlīdzināšanu horizontāli centrā un vertikāli beigās.

Iestatiet, lai otrais elements tiktu izlīdzināts horizontāli sākumā un vertikāli beigās, bet ceturtais elements - horizontāli centrā un vertikāli sākumā.