CSS grid-de mazmunyň iki ok boýunça deňleşdirilmesi

Gridde köplenç mazmuny bir wagtda gorizontal we düşel oklar boýunça deňleşdirmek zerur bolup biler. Bu maksat üçin biz öňki sapakda gözden geçirilen iki aýratynlygy bilelikde ulanyp bileris: justify-content we align-content.

Düşel ok başy we gorizontal ok soňy boýunça

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: flex-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;
}

Düşel ok soňy we gorizontal ok başy boýunça

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

#parent {
	display: grid;
	justify-content: flex-start;
	align-content: flex-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;
}

Düşel ok we gorizontal ok merkezi boýunça

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

#parent {
	display: grid;
	justify-content: flex-end;
	align-content: 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;
}

Amaly wezipeler

Alty elementden ybarat bolan grid dörediň we olary iki sütün üçin ýerleşdiriň. Elementleri gorizontal ok başy we düşel ok merkezi boýunça deňleşdiriň.

Indi grid elementlerini üç sütün üçin ýerleşdiriň we elementleri gorizontal ok merkezi we düşel ok soňy boýunça deňleşdirmek üçin bellik beriň.

Öňki wezipäni üýtgediň, şonuň üçin elementleriň deňleşdirilmegi gorizontal ok soňy we düşel ok merkezi boýunça bolsun.