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

Grid'де жөө гана жайгаштыруу эмес, горизонтальдык ок боюнча мазмунду тегиздөө керек болушу мүмкүн. Бул учурда биз эне-элементке берилген justify-content касиетин колдонобуз. Бул касиет кантип иштешин мисалдар аркылуу карап көрөлү.

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

Биздин элементтер үчүн горизонтальдык октун башталышы боюнча тегиздөө орнотуңуз:

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

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

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

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

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

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