CSS grid içindki öýjükleriň her iki ok boýunça düzmegiň gysgaltmasy

Gysgaltma aýratynlygy place-items ýardamynda grid öýjükleri içindki elementleri bir wagtda her iki ok boýunça düzmek bolýar. Aýratynlyk iki bahany kabul edýär, olar boşluk bilen bölünýär. Birkinji baha bilen biz elementüň şekili dikeline, ikinji bilen bolsa göni çyzyga görä kesgitläýäris. Aýratynlyk ata-elementde kesgitlenýär.

Geliň bu aýratynlygyň işini mysallar görkezeliň.

Dikiň merkezine we göni çyzygyň başyna görä

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

Gridimiziň debuggerdaky görnüşine serediň:

Dikiň ahyryna we göni çyzygyň merkezine görä

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

Gridimiziň debuggerdaky görnüşine serediň:

Dikiň başyna we göni çyzygyň ahyryna görä

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

Gridimiziň debuggerdaky görnüşine serediň:

Amaly meseleler

Alty elementden ybarat grid dörediň we olary iki sütün içinde ýerleşdiriň. Elementleri göni çyzygyň başy we dikiň merkezi boýunça düziň.

Indi grid elementlerini üç sütün içinde ýerleşdiriň we elementleriň düzmegini göni çyzygyň merkezi we dikiň merkezi boýunça kesgitläň.

Öňki meseläni şeýle üýtgediň, elementleriň düzmegi göni çyzygyň ahyry we dikiň başy boýunça ýerine ýetirilsin.