CSS Gridda mazmunni ikkala o'q bo'yicha joylashtirish

Gridda tez-tez gorizontal va vertikal o'qlar bo'yicha birdaniga mazmunni joylashtirish talab qilinishi mumkin. Buning uchun biz oldingi darsda ko'rib chiqilgan ikki xususiyatni birgalikda ishlatishimiz mumkin: justify-content va align-content.

Vertikal boshiga va gorizontal oxiriga

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

Vertikal oxiriga va gorizontal boshiga

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

Vertikal o'q markazi va gorizontal o'q bo'yicha

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

Amaliy vazifalar

Oltita elementdan iborat grid yarating va ularni ikkita ustun bo'yicha joylashtiring. Elementlarni gorizontal o'q boshiga va vertikal o'q markaziga joylashtiring.

Endi grid elementlarini uchta ustun bo'yicha joylashtiring va elementlarni gorizontal o'q markaziga va vertikal o'q oxiriga joylashtirishni belgilang.

Oldingi vazifani o'zgartiring, elementlarni gorizontal o'q oxiriga va vertikal o'q markaziga joylashtirishni belgilang.