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

Гридде көп учурда мазмунду бир мезгилде горизонталдык жана вертикалдык октору боюнча тегиздөө керек болушу мүмкүн. Бул максатта биз сиз мурунку сабакта карап чыккан эки касиетти бирге колдоно алабыз: justify-content жана align-content.

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

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

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

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

Вертикалдык октун борбору жана горизонталдык октун борбору боюнча

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

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

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

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

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