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

Тор торчонун уячаларынын ичиндеги, башкача айтканда колонналар менен катарлардын кесилишинен пайда болгон аянттардын ичиндеги элементтерди тегиздөө үчүн, ата-эне элементке берилген justify-items касиети колдонулат. Тегиздөөнү браузердин теңөөчүсүндө торду көрүүдө эң ачык байкоого болот.

Октун башталышы боюнча

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

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

#parent {
	display: grid;
	justify-items: start;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	grid-gap: 10px;
	padding: 10px;
	height: 200px;
	width: 400px;
	border: 2px solid #696989;
}
#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>5</div>
</div>

#parent {
	display: grid;
	justify-items: center;
	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;
}

Эми биздин торду теңөөчүдө көрөлү:

Октун аягы боюнча

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

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

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

Эми биздин торду теңөөчүдө көрөлү:

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

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

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

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