CSS Gridda alohida elementni ikkala o‘q bo‘yicha joylash

Alohida elementni gorizontal va vertikal o‘qlar bo‘yicha bir vaqtning o‘zida justify-self va align-self xususiyatlarini birlashtirish orqali joylash mumkin.

Gorizontal boshiga va vertikal markaziga

Keling, birinchi elementimizni gorizontal va vertikal o‘qlar bo‘yicha boshiga joylaylik:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: start;
	align-self: center;
}

Gorizontal markaziga va vertikal boshiga

Endi birinchi elementni gorizontal markaziga va vertikal boshiga joylaylik:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: center;
	align-self: start;
}

Gorizontal oxiriga va vertikal markaziga

Keling, birinchi elementni gorizontal oxiriga va vertikal markaziga joylaylik:

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

#parent {
	display: grid;
	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;
}
#elem1 {
	justify-self: end;
	align-self: center;
}

Amaliy mashqlar

Oltita elementdan iborat grid yarating va ularni ikki qatorga joylashtiring. Ikkinchi elementni gorizontal boshiga va vertikal markaziga joylang.

Endi grid elementlarini uch qatorga joylashtiring va uchinchi elementni gorizontal markaziga va vertikal oxiriga joylang.

Oldingi mashqni o‘zgartiring, to‘rtinchi element gorizontal oxiriga va vertikal markaziga joylansin.

Endi beshinchi element gorizontal boshiga va vertikal boshiga, oltingchi element esa gorizontal oxiriga va vertikal markaziga joylanishi uchun sozlang.