Подравняване на съдържанието по двете оси в CSS Grid

Често в Grid може да се наложи едновременно да подравните съдържанието по хоризонталната и вертикалната ос на мрежата. За тази цел можем да използваме съвместно двете свойства, разгледани от вас в предишния урок: 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;
}

Практически задачи

Създайте Grid, състоящ се от шест елемента и ги разположете в две колони. Изпълнете подравняване на елементите в началото на хоризонталната и центъра на вертикалната ос на мрежата.

Сега разположете елементите на мрежата в три колони и задайте подравняване на елементите в центъра на хоризонталната и края на вертикалната ос на мрежата.

Променете предишната задача, така че подравняването на елементите да се извършва в края на хоризонталната и центъра на вертикалната ос на мрежата.