CSS grid-de ýeke-täk elementleri gorizontal ok boýunça deňleşdirme

Gorizontal ok boýunça deňleşdirme diňe ata elementde däl, eýsem her bir çaga üçin aýratynlykda belgiläp bolýar. Bu maksat üçin justify-self aýratynlygy ulanylýar.

Gorizontal oküň başy boyunça

Geliň, birinji elementimiz üçin deňleşdirmäni gorizontal oküň başy boyunça belgileýäris:

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

Gorizontal oküň merkezi boyunça

Geliň, birinji element üçin deňleşdirmäni gorizontal oküň merkezi boyunça belgileýäris:

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

Gorizontal oküň soňy boyunça

Geliň, birinji element üçin deňleşdirmäni gorizontal oküň soňy boyunça belgileýäris:

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

Amaly meseleler

Iki hatardan we bäş elementden ybarat grid dörediň. Ikinji elementiň deňleşdirilşini gorizontal oküň başy boyunça ýerine ýetiriň.

Indi grid elementlerini üç hatar boýunça ýerleşdiriň we üçünji elementiň deňleşdirilşini gridiň gorizontal oküň merkezi boyunça belgileň.

Öňki meseläni üýtgediň, beşinji elementiň deňleşdirilişi gorizontal oküň soňy boyunça bolsun.