grid-template-columns xususiyati
grid-template-columns xususiyati
grid yoki setkadagi element egallaydigan
ustunlar soni va kengligini belgilaydi.
Xususiyat ota-elementda ko'rsatiladi
va farzand-elementlarning ustun kengligini aniqlaydi.
Xususiyat qiymatida ustun kengligini
istalgan o'lchov birliklarida
ko'rsatamiz.
Xususiyatlarda piksellarda qiymatlarni ko'rsatishda
ustun o'lchamlari aniq ularga mos keladi.
Agar auto so'zini belgilasak, ustunlar barcha
mavjud bo'shliqni to'ldiradi. fr (fraksiya) birligidan foydalanish
barcha bo'shliq teng qismlarga
bo'linishini anglatadi.
fr ning afzalligi uning turli
konteynerlar yoki ekran o'lchamlariga moslashuvchanligi,
chunki fr ularni aniq piksel o'lchamiga bog'lamasdan
ko'rsatilgan fraksiyalar soniga bo'ladi.
Sintaksis
selektor {
grid-template-columns: ustun kengligi;
}
Misol
Keling, griddagi elementlarimiz uchun ustun kengligini belgilaymiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: 50px 100px 200px 50px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling, birinchi va uchinchi ustunlarga piksellarda aniq kenglik belgilaymiz, ikkinchi ustun esa mavjud bo'shliqni avtomatik to'ldirsin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 100px auto 150px;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi grid-template-columns xususiyati
yordamida birinchi va ikkinchi
ustunlar konteynerning bir qismini egallasin,
uchinchi ustun esa uch qismini egallasin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 1fr 3fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
fr birliklarida ko'rsatilgan qiymatlar
kasr shaklida bo'lishi mumkin. Keling
oldingi misolni o'zgartiramiz, ikkinchi
va uchinchi ustun kengligini
kasr sonlarda ko'rsatamiz:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
#parent {
display: grid;
grid-template-columns: 1fr 0.5fr 2.5fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling grid-template-columns xususiyatida
repeat() funksiyasini ko'rsatamiz,
bu konteynerga barcha uchta ustun 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-columns: repeat(3, 1fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling oldingi misolni o'zgartiramiz, shunda uchta bir xil ustunga konteynerning ikkita fraksiyasini egallaydigan to'rtinchi ustun qo'shilsin:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(3, 1fr) 2fr;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling, birinchi ikkita ustun uchun konteynerning bir fraksiyasi kenglik belgilaymiz, oxirgi ikkita ustun uchun esa - ikkita fraksiya:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling ustun 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-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#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 ustunlar bilan to'ldiradi:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
auto-fill bilan birga minmax funksiyasini
ko'rsatish juda qulay,
bu ustun kengligi diapazonini minimaldan maksimal qiymatgacha belgilaydi.
Agar konteyner kengligi barcha
ustunlarni sig'dira olmasa, ularning ba'zilari yangi
qatorga ko'chadi, shu bilan birga qatordagi ustunlar
unga teng taqsimlanadi. Keling oldingi
misolda minmax funksiyasini ko'rsatamiz.
Ustunlarni joylashtirishning turli variantlarini ko'rish uchun
brauzeringiz sahifa kengligini o'zgartiring:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
border: 2px solid #696989;
padding: 10px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Endi keling auto-fit xususiyatini ko'rsatamiz,
uning auto-fill dan farqi shundaki,
u ustunlar sonini konteynerning mavjud kengligiga moslashtiradi, ularni kengaytirib yoki siqib:
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
#parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 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 konteynerning qaysi qismini ustun egallashini belgilaydi.
Bunda avval ustun 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-columns: 50% 1fr 2fr 30%;
border: 2px solid #696989;
padding: 10px;
width: 400px;
}
#parent > div {
padding: 10px;
border: 1px solid #696989;
}
:
Misol
Keling, birga xususiyatlardan foydalanamiz
grid-template-columns va
grid-template-rows:
<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, xususiyatlar yordamida
grid-template-columns va
grid-template-rows
uch qatorda joylashgan to'qqiz katakdan iborat jadval yarataylik. Bundan tashqari, ikkinchi va uchinchi qatorlar bir xil kenglikda bo'lsin,
har bir ustun esa - turli 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 qatorni ikkita fraksiya kenglikda qilamiz, 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-rowsxususiyati,
bu griddagi qatorlar soni va kengligini belgilaydi -
grid-auto-columnsxususiyati,
bu noaniq griddagi ustunlar soni va kengligini belgilaydi
