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

Grid'де мазмунду тик огу боюнча тегиздөө үчүн биз align-content касиетин колдонобуз, ал ата-эне элементке берилет.

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

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

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

#parent {
	display: grid;
	align-content: 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>5</div>
</div>

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

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

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

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

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

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

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

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

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