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

Горизонталь огу боюнча тууралоону ата-эне элементинде гана эмес, ар бир бала элемент үчүн бөлүктөө берилиши мүмкүн. Бул максатта justify-self касиети колдонулат.

Горизонталь огунун башталышы боюнча

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

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

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

Горизонталь огунун борбору боюнча

Келгиле, биринчи элементтин тууралоосун горизонталь огунун борбору боюнча коёлу:

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

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

Горизонталь огунун аягы боюнча

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

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

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

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

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

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

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