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

Амалий вазифалар

Олтита элементдан иборат грид яратинг ва уларни иккита устунга жойланг. Элементларни гриднинг горизонтал ўқи бўйича бошига ва вертикал ўқи бўйича марказига тегинг.

Энди грид элементларини учта устунга жойлаштиринг ва уларни гриднинг горизонтал ўқи бўйича марказига ва вертикал ўқи бўйича охирига тегишни белгиланг.

Олдинги вазифани ўзгартиринг, элементларни гриднинг горизонтал ўқи бўйича охирига ва вертикал ўқи бўйича марказига тегиш амалга оширилсин.