CSS Gridda alohida elementni joylashtirish qisqartmasi
Alohida elementni gorizontal va vertikal o'qlar bo'yicha
bir vaqtning o'zida joylashtirish mumkin.
Buning uchun place-self xususiyati ishlatiladi.
U probel orqali ajratilgan ikkita qiymatni qabul qiladi.
Birinchi qiymat vertikal bo'yicha joylashtirishni,
ikkinchisi - gorizontal bo'yicha joylashtirishni belgilaydi.
Keling, misollar orqali ko'rib chiqaylik.
Vertikal markaz va gorizontal boshiga
<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 {
place-self: center start;
}
:
Vertikal boshiga va gorizontal oxiriga
<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 {
place-self: start end;
}
:
Vertikal oxiriga va gorizontal markaziga
<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 {
place-self: end center;
}
:
Amaliy vazifalar
Besh elementdan iborat grid yarating va ularni uch qator bo'yicha joylashtiring. Birinchi elementni gorizontal o'q bo'yicha boshiga va vertikal o'q bo'yicha markaziga joylashtiring.
Oldingi vazifani shunday o'zgartiringki, uchinchi elementning joylashuvi gorizontal o'q bo'yicha oxiriga va vertikal o'q bo'yicha markaziga bo'lsin.
Endi grid elementlarini ikkita qator bo'yicha joylashtiring va beshinchi elementning joylashuvini gorizontal o'q bo'yicha markaziga va vertikal o'q bo'yicha oxiriga belgilang.
Ikkinchi element gorizontal o'q bo'yicha boshiga va vertikal o'q bo'yicha oxiriga joylashsin, to'rtinchi element esa - gorizontal o'q bo'yicha markaziga va vertikal o'q bo'yicha boshiga joylashsin.
