CSS Gridda kataklar ichidagi elementlarni ikkala o‘q bo‘yicha tekislash qisqartmasi
place-items xususiyati qisqartmasi yordamida
grid kataklari ichidagi elementlarni
ikkala o‘q bo‘yicha bir vaqtda tekizlash mumkin.
Xususiyat bo‘shliq bilan ajratilgan ikkita qiymatni qabul qiladi.
Birinchi qiymat bilan elementning vertikal,
ikkinchisi bilan gorizontal o‘q bo‘yicha joylashishini belgilaymiz.
Xususiyat ota-elementda belgilanadi.
Keling, ushbu xususiyatning ishlashini namunalar orqali ko‘rib chiqaylik.
Vertikal bo‘yicha markaz va gorizontal bo‘yicha boshiga
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
place-items: center 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;
}
:
Keling, gridimizni debuggerda ko‘ramiz:
Vertikal bo‘yicha oxiri va gorizontal bo‘yicha markaz
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: end 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;
}
:
Keling, gridimizni debuggerda ko‘ramiz:
Vertikal bo‘yicha boshiga va gorizontal bo‘yicha oxiri
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
place-items: start 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;
}
:
Keling, gridimizni debuggerda ko‘ramiz:
Amaliy vazifalar
Oltita elementdan tashkil topgan grid yarating va ularni ikkita ustunda joylashtiring. Elementlarni gorizontal o‘q bo‘yicha boshiga va vertikal o‘q bo‘yicha markaziga tekislang.
Endi grid elementlarini uchta ustunda joylashtiring va elementlarning tekislanishini gorizontal o‘q bo‘yicha markaziga va vertikal o‘q bo‘yicha markaziga belgilang.
Oldingi vazifani shunday o‘zgartiringki, elementlarning tekislanishi gorizontal o‘q bo‘yicha oxiriga va vertikal o‘q bo‘yicha boshiga amalga oshirilsin.
