CSS гриддин уячаларынын ичинде эки ок боюнча тегиздөө

Гриддин уячаларынын ичиндеги элементтерди горизонталдык жана тик октор боюнча бир эле учурда тегиздесе болот. Бул максатта биз эки касиетти justify-items жана align-items бириктире алабыз, алар ата-эне элементке берилет.

Октордун борбору боюнча

Келгиле, биздин элементтерибизди горизонталдык жана тик октордун борбору боюнча тегиздейли:

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

Эми биздин гридибизди дебаггерде көрөлү:

Горизонталдыктын башы жана тик октун аягы боюнча

Келгиле, элементтерибизди уячалардын ичинде горизонталдык октун башы жана тик октун аягы боюнча жайгаштыралы:

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

Эми биздин гридибизди дебаггерде көрөлү:

Горизонталдыктын аягы жана тик октун башы боюнча

Келгиле, биздин элементтерибизди уячалардын ичинде горизонталдык октун аягы жана тик октун башы боюнча жайгаштыралы:

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

Эми биздин гридибизди дебаггерде көрөлү:

Практикалык тапшырмалар

Үч катарга жайгашкан беш элементтен турган грид түзүңүз. Уячалардын ичиндеги элементтерди горизонталдык октун башы жана тик октун борбору боюнча тегиздеңиз.

Эми гриддин элементтерин эки катарга жайгаштырып, уячалардын ичиндеги элементтерди тегиздөөнү горизонталдык октун борбору жана тик октун башы боюнча коюңуз.

Мурунку тапшырманы өзгөртүңүз, элементтердин тегиздөөсү горизонталдык октун аягы жана тик октун борбору боюнча жүргүзүлсүн.