Alinierea pe ambele axe în interiorul celulelor grid-ului CSS

Puteți seta simultan alinierea elementelor în interiorul celulelor grid-ului atât pe axa orizontală, cât și pe cea verticală. În acest scop, putem combina două proprietăți justify-items și align-items, care sunt setate în elementul părinte.

În centrul axelor

Să aliniem elementele noastre în centrul axelor orizontală și verticală:

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

Acum să ne uităm la grid-ul nostru în instrumentul de dezvoltare:

La începutul axei orizontale și sfârșitul axei verticale

Să poziționăm elementele noastre în celule la începutul axei orizontale și sfârșitul axei verticale:

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

Acum să ne uităm la grid-ul nostru în instrumentul de dezvoltare:

La sfârșitul axei orizontale și începutul axei verticale

Să poziționăm elementele noastre în celule la sfârșitul axei orizontale și începutul axei verticale:

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

Acum să ne uităm la grid-ul nostru în instrumentul de dezvoltare:

Sarcini practice

Creați un grid, format din cinci elemente, poziționate pe trei rânduri. Efectuați alinierea elementelor în celule la începutul axei orizontale și centrul axei verticale.

Acum poziționați elementele grid-ului pe două rânduri și setați alinierea elementelor în interiorul celulelor la centrul axei orizontale și începutul axei verticale.

Modificați sarcina anterioară, astfel încât alinierea elementelor să aibă loc la sfârșitul axei orizontale și centrul axei verticale.