Atsevišķa elementa izlīdzināšana abās CSS režģa asīs

Var izlīdzināt atsevišķu elementu vienlaikus gan pa horizontālo, gan pa vertikālo asi apvienojot īpašības justify-self un align-self.

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

Iestatīsim mūsu pirmā elementa izlīdzināšanu pa horizontālās ass sākumu un vertikālās ass centru:

<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 {
	justify-self: start;
	align-self: center;
}

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

Tagad iestatīsim pirmā elementa izlīdzināšanu pa horizontālās ass centru un vertikālās ass sākumu:

<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 {
	justify-self: center;
	align-self: start;
}

Pa horizontālās ass beigām un vertikālās ass centru

Iestatīsim pirmā elementa izlīdzināšanu pa horizontālās ass beigām un vertikālās ass centru:

<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 {
	justify-self: end;
	align-self: center;
}

Praktiskie uzdevumi

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

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

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

Tagad dariet tā, lai piektā elementa izlīdzināšana notiktu pa horizontālās ass sākumu un vertikālās ass sākumu, bet sestā elementa - pa horizontālās ass beigām un vertikālās ass centru.