CSS гриддаги контентни горизантал ўқ бўйича текислаш

Гридда фақатгина элементларни жойлаштиришгина эмас, балки уларни горизантал ўқ бўйича текислаш ҳам талаб этилиши мумкин. Бундай ҳолларда биз justify-content хусусиятидан фойдаланамиз, у элемент-отада белгиланади. Келгила, ушбу хусусиятни мисоллар орқали кўриб чиқайлик.

Ўқ бошланиши бўйича

Элементларимизни горизантал ўқнинг бошланишига текислаймиз:

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

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

Ўқ маркази бўйича

Энди элементларимизни горизантал ўқнинг марказига текислаймиз:

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

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

Ўқ тугаши бўйича

Келгила, элементларимизни горизантал ўқнинг тугашига текислаймиз:

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

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

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

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

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

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