grid-template-rows xususiyati
grid-template-rows xususiyati
grid yoki setkadagi element egallaydigan
qatorlar soni va kengligini belgilaydi.
Xususiyat qiymatida qatorlar kengligini
o‘lchov birliklarida
belgilaymiz.
Xususiyat ota-elementda ko‘rsatiladi
va farzand-elementlarning qatorlar kengligini belgilaydi.
Xususiyatlarda piksellarda qiymatlar ko‘rsatilganda
qatorlar o‘lchamlari aniq ularga mos keladi.
Agar auto so‘zini belgilasak, qatorlar
barcha mavjud bo‘sh joyni to‘ldiradi.
fr (fraksiya) birligidan foydalanish
barcha bo‘sh joy teng ulushlarga
bo‘linishini anglatadi.
fr ning afzalligi uning turli
konteynerlar yoki ekran o‘lchamlariga moslashuvchanligida,
chunki fr ularni aniq piksel o‘lchamiga bog‘lanmasdan
ko‘rsatilgan fraksiyalar soniga bo‘ladi.
Sintaksis
selector {
grid-template-rows: qator kengligi;
}
Misol
Keling, griddagi elementlarimiz uchun qatorlar kengligini belgilaymiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50px 100px 50px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling, birinchi va uchinchi qatorga piksellarda qat'iy kenglik belgilaymiz, ikkinchi qator esa mavjud bo‘sh joyni avtomatik to‘ldirsin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 100px auto 60px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi grid-template-rows xususiyati
yordamida birinchi va ikkinchi
qatorlar konteynerning bir qismini egallashini,
uchinchi qator esa uch qismini egallashini qilaylik:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
fr birliklarida ko‘rsatilgan qiymatlar
kasr shaklida bo‘lishi mumkin. Keling
oldingi misolni o‘zgartirib,
ikkinchi va uchinchi qatorlar uchun kenglikni
kasr sonlarda ko‘rsataylik:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling grid-template-rows xususiyatida
repeat() funksiyasini ko‘rsataylik,
bu konteynerga barcha uch qatorning bir xil kenglikda bo‘lishi kerakligini bildiradi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling oldingi misolni o‘zgartirib, uchta bir xil qatordan tashqari to‘rtinchi qator qo‘shilishini va u konteynerning ikkita fraksiyasini egallashini qilaylik:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling, birinchi ikkita qator uchun konteynerning bir fraksiyasi kenglik belgilaymiz oxirgi ikkita qator uchun esa - konteynerning ikkita fraksiyasi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling qatorlar kengligini belgilashda
repeat() funksiyasi va erkin fr birliklarini birlashtiramiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 300px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Shuningdek repeat() funksiyasida
auto-fill qiymatini ko‘rsatish mumkin, bu bizning
konteynerimizni kerakli kenglikdagi bir xil qatorlar bilan to‘ldiradi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, 50px);
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 200px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
auto-fill bilan birga
minmax funksiyasini ko‘rsatish juda qulay,
bu qatorlar kengligi diapazonini
minimaldan maksimal qiymatgacha belgilaydi.
Agar konteyner kengligi barcha
qatorlarni sig‘dira olmasa, ularning ba'zilari
yangi qatorga ko‘chadi, shu bilan birga qatordagi qatorlar
unga teng taqsimlanadi. Keling oldingi
misolda minmax funksiyasini ko‘rsatib o‘zgartiramiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fill, minmax(50px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling auto-fit xususiyatini ko‘rsataylik,
uning auto-fill dan farqi shundaki,
u qatorlar sonini konteynerning
mavjud kengligiga moslashtiradi, ularni kengaytirib yoki
siqib chiqaradi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Shuningdek fr bilan bir qatorda
% dagi qiymatlardan foydalanish mumkin, ular ham
qator konteynerning qaysi qismini egallashini belgilaydi.
Bunda avval qator o‘lchami
% da hisoblanadi, qolgan bo‘sh joy esa
fraksiyalarga bo‘linadi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-rows: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling, birgalikda
grid-template-columns va
grid-template-rows xususiyatlaridan foydalanamiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling,
grid-template-columns va
grid-template-rows xususiyatlari yordamida
uch qatorda joylashgan to‘qqiz katordan iborat jadval yarataylik. Bunda ikkinchi va uchinchi qatorlar bir xil kenglikda bo‘ladi,
har bir ustun esa - har xil kenglikda:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 60px 1fr 60px;
grid-template-columns: 20% 1fr 15%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi oldingi misoldagi jadvalda yuqori qator kengligini ikkita fraksiya qilaylik, birinchi ustunni esa - yarim fraksiyada:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
#parent {
display: grid;
grid-template-rows: 2fr 1fr 1fr;
grid-template-columns: 0.5fr 1fr 1fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
height: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Shuningdek qarang
-
grid-template-columnsxususiyati,
bu griddagi ustunlar soni va kengligini belgilaydi -
grid-auto-rowsxususiyati,
bu noaniq griddagi qatorlar soni va kengligini belgilaydi
