Ichki va tashqi kalit so'zlar bilan CSS Grid yo'lak o'lchamining kuchini oching. Turli kontent va ekran o'lchamlari uchun moslashuvchan, sezgir maketlar yaratishni o'rganing.
CSS Grid Yo'lak O'lchamlari: Ichki va Tashqi Boshqaruvni O'zlashtirish
CSS Grid Layout murakkab va sezgir veb-maketlarni yaratish uchun kuchli vositadir. Uning asosiy kuchli tomonlaridan biri moslashuvchan yo'lak o'lchamlari imkoniyatlarida bo'lib, bu qatorlar va ustunlar hajmini aniqlik bilan boshqarish imkonini beradi. Turli xil yo'lak o'lchamlari kalit so'zlari va funksiyalarini tushunish moslashuvchan va qo'llab-quvvatlanadigan maketlarni yaratish uchun juda muhimdir. Ushbu maqolada CSS Griddagi ichki va tashqi o'lchamlarning ilg'or tushunchalari chuqur o'rganilib, ularning turli kontent va ekran o'lchamlariga mos ravishda moslashadigan maketlarni yaratishga qanday imkon berishi ko'rib chiqiladi.
Grid Yo'laklari va O'lchamlarini Tushunish
Ichki va tashqi o'lchamlarning o'ziga xos xususiyatlariga sho'ng'ishdan oldin, keling, CSS Grid yo'laklarining asosiy tushunchalarini takrorlab o'taylik.
Grid Yo'laklari Nima?
Grid yo'laklari - bu grid maketining qatorlari va ustunlari. Ular grid elementlari joylashtiriladigan tuzilmani belgilaydi. Ushbu yo'laklarning o'lchami umumiy maketga va kontentning grid ichida qanday taqsimlanishiga bevosita ta'sir qiladi.
Yo'lak O'lchamlarini Belgilash
Siz yo'lak o'lchamlarini grid-template-rows va grid-template-columns xususiyatlari yordamida belgilashingiz mumkin. Bu xususiyatlar bo'sh joy bilan ajratilgan qiymatlar ro'yxatini qabul qiladi, bu yerda har bir qiymat mos keladigan yo'lakning o'lchamini ifodalaydi. Masalan:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto auto;
}
Bu kod uchta ustun va ikkita qatordan iborat grid yaratadi. Birinchi va uchinchi ustunlarning har biri mavjud bo'sh joyning 1 qismini (fr) egallaydi, ikkinchi ustun esa 2 qismini egallaydi. Qatorlar o'zlarining kontentiga qarab avtomatik ravishda o'lchanadi.
Ichki va Tashqi O'lchamlar
Ilg'or grid yo'lak o'lchamlarining asosi ichki va tashqi o'lchamlar o'rtasidagi farqni tushunishda yotadi. Ushbu tushunchalar yo'lakning o'lchami uning kontentiga va mavjud bo'shliqqa qarab qanday aniqlanishini belgilaydi.
Ichki O'lcham: Kontentga Bog'liq
Ichki o'lcham shuni anglatadiki, grid yo'lagining o'lchami ushbu yo'lakka joylashtirilgan grid elementlari ichidagi kontent tomonidan belgilanadi. Yo'lak ma'lum chegaralargacha kontentni sig'dirish uchun kengayadi yoki qisqaradi. Ichki o'lcham kalit so'zlari quyidagilarni o'z ichiga oladi:
auto: Sukut bo'yicha qiymat. Yo'lak o'lchami yo'lakdagi grid elementlarining eng katta minimal o'lcham hissasi bilan belgilanadi. Ko'p hollarda, bu yo'lakning barcha kontentni to'lib-toshmasdan sig'dirish uchun etarlicha katta bo'lishini anglatadi, ammo unga grid elementlarida o'rnatilganmin-width/min-heightqiymatlari ta'sir qilishi mumkin.min-content: Yo'lak kontentga to'lib-toshmasdan kerak bo'lgan eng kichik bo'sh joyga sig'adigan darajada o'lchanadi. Masalan, matn so'zlarni noqulay tarzda bo'lsa ham, iloji boricha eng kichik nuqtada o'raladi.max-content: Yo'lak kontentga to'lib-toshmasdan kerak bo'lgan eng katta bo'sh joyga sig'adigan darajada o'lchanadi. Matn uchun bu, u imkon qadar o'ralishdan qochishga harakat qilishini anglatadi, bu esa potentsial juda keng yoki baland yo'laklarga olib kelishi mumkin.fit-content(length): Yo'lakmax-contentva belgilanganlengthqiymatlaridan kichikrog'iga qarab o'lchanadi. Bu sizga yo'lak uchun maksimal o'lchamni belgilashga imkon beradi va shu bilan birga uning kontentiga qarab qisqarishiga ruxsat beradi.
Misol: min-content va max-content bilan ichki o'lcham
Ikki ustunli stsenariyni ko'rib chiqaylik. Birinchi ustun min-content bilan, ikkinchisi esa max-content bilan o'lchanadi. Agar birinchi ustundagi kontent uzun so'z bo'lsa, u minimal kontent hajmiga sig'ish uchun har qanday mumkin bo'lgan nuqtada bo'linadi. Ikkinchi ustun esa kontentni o'ramasdan sig'dirish uchun kengayadi.
.grid-container {
display: grid;
grid-template-columns: min-content max-content;
grid-gap: 10px;
}
.item1 {
grid-column: 1;
}
.item2 {
grid-column: 2;
}
<div class="grid-container">
<div class="item1">Supercalifragilisticexpialidocious</div>
<div class="item2">Short text</div>
</div>
Ushbu misolda "Supercalifragilisticexpialidocious" so'zi birinchi ustunda bir necha qatorga bo'linadi, "Short text" esa ikkinchi ustunda bir qatorda qoladi. Bu ichki o'lchamning kontentning o'ziga xos o'lcham talablariga qanday moslashishini ko'rsatadi.
Misol: fit-content() bilan ichki o'lcham
`fit-content()` funksiyasi yo'lakning kontentga qarab o'lchamlanishini xohlaganingizda, lekin ayni paytda maksimal o'lcham chegarasiga ega bo'lishi kerak bo'lganda foydalidir. Bu ustunlar yoki qatorlarning juda kattalashib ketishining oldini olish uchun ishlatilishi mumkin, shu bilan birga kontent kichikroq bo'lsa, ularning qisqarishiga imkon beradi.
.grid-container {
display: grid;
grid-template-columns: fit-content(200px) 1fr;
grid-gap: 10px;
}
Ushbu misolda birinchi ustun o'z kontentiga moslashish uchun kengayadi, lekin eni 200px dan oshmaydi. Ikkinchi ustun qolgan bo'sh joyni egallaydi. Bu ustunning moslashuvchan bo'lishini, lekin juda ko'p joy egallamasligini xohlagan maketlarni yaratish uchun foydalidir.
Tashqi O'lcham: Bo'shliqqa Bog'liq
Boshqa tomondan, tashqi o'lcham shuni anglatadiki, grid yo'lagining o'lchami kontentdan tashqaridagi omillar, masalan, grid konteyneridagi mavjud bo'sh joy yoki qat'iy belgilangan o'lcham qiymati bilan belgilanadi. Tashqi o'lcham kalit so'zlari quyidagilarni o'z ichiga oladi:
length: Qat'iy uzunlik qiymati (masalan,100px,2em,50vh). Yo'lak kontentdan qat'i nazar, aynan shu o'lchamda bo'ladi.percentage: Grid konteyneri o'lchamining foizi (masalan,50%). Yo'lak mavjud bo'sh joyning ushbu foizini egallaydi.fr(fractional unit): Boshqa barcha yo'laklar o'lchamlangandan so'ng grid konteyneridagi mavjud bo'sh joyning bir qismini ifodalaydi. Bu yo'laklar orasida bo'sh joyni taqsimlashning eng moslashuvchan usuli.
Misol: fr Birliklari bilan Tashqi O'lcham
fr birligi turli ekran o'lchamlariga moslashadigan sezgir maketlarni yaratish uchun bebaho hisoblanadi. Yo'laklarga kasr birliklarini belgilash orqali siz ularning mavjud bo'sh joyni proportsional ravishda bo'lishishini ta'minlaysiz.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
}
Ushbu misolda grid konteyneri ikkita ustunga ega. Birinchi ustun mavjud bo'sh joyning 1 qismini, ikkinchi ustun esa 2 qismini egallaydi. Agar grid konteynerining eni 600px bo'lsa, birinchi ustun 200px, ikkinchi ustun esa 400px kengligida bo'ladi (har qanday grid bo'shlig'i ayirib tashlangan holda). Bu ekran o'lchamidan qat'i nazar, ustunlarning doimo o'zlarining proportsional munosabatlarini saqlab qolishini ta'minlaydi.
Misol: Foizlar va qat'iy uzunliklar bilan tashqi o'lcham
.grid-container {
display: grid;
grid-template-columns: 200px 50% 1fr;
grid-gap: 10px;
}
Ushbu misolda birinchi ustunning eni qat'iy 200px qilib belgilangan. Ikkinchi ustun grid konteyneri kengligining 50% ni egallaydi. Nihoyat, uchinchi ustun 1fr birligidan foydalanadi, shuning uchun u birinchi ikki ustun o'lchamlari belgilanganidan keyin qolgan bo'sh joyni egallaydi.
Ichki va Tashqi O'lchamlarni Birlashtirish: minmax()
minmax() funksiyasi ichki va tashqi o'lchamlarni birlashtirishga imkon beradi va yo'lak o'lchamlari ustidan yanada ko'proq nazoratni ta'minlaydi. U yo'lak uchun maqbul o'lchamlar diapazonini belgilaydi, ham minimal, ham maksimal qiymatni ko'rsatadi.
minmax(min, max)
min: Yo'lakning minimal o'lchami. Bu har qanday yaroqli yo'lak o'lcham qiymati bo'lishi mumkin, jumladan, ichki kalit so'zlar (auto,min-content,max-content) yoki tashqi qiymatlar (length,percentage,fr).max: Yo'lakning maksimal o'lchami. Bu ham har qanday yaroqli yo'lak o'lcham qiymati bo'lishi mumkin. Agar `max` qiymati `min` dan kichik bo'lsa, `max` e'tiborga olinmaydi va `min` ishlatiladi.
Misol: Sezgir Ustunlar uchun minmax() dan Foydalanish
minmax() uchun keng tarqalgan foydalanish holati - bu minimal kenglikka ega, ammo mavjud bo'sh joyni to'ldirish uchun kengayishi mumkin bo'lgan sezgir ustunlarni yaratishdir.
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
Bu yerda repeat(auto-fit, minmax(200px, 1fr)) kamida 200px kengligida bo'lgan, ammo qolgan bo'sh joyni to'ldirish uchun kengayishi mumkin bo'lgan imkon qadar ko'p ustun yaratadi. auto-fit kalit so'zi bo'sh ustunlarning yig'ilishini ta'minlab, moslashuvchan va sezgir maket yaratadi.
Misol: minmax() ni ichki o'lcham bilan birlashtirish
.grid-container {
display: grid;
grid-template-columns: minmax(min-content, 300px) 1fr;
grid-gap: 10px;
}
Ushbu misolda birinchi ustun kamida o'zining minimal kontent hajmi kengligida bo'ladi, lekin 300px dan oshmaydi. Ikkinchi ustun qolgan bo'sh joyni egallaydi.
Amaliy Qo'llash va Eng Yaxshi Amaliyotlar
Ichki va tashqi o'lchamlarni tushunish mustahkam va moslashuvchan maketlarni yaratish uchun juda muhimdir. Yodda tutish kerak bo'lgan ba'zi amaliy qo'llashlar va eng yaxshi amaliyotlar:
- Sezgir Navigatsiya: Minimal kenglikka ega, ammo navigatsiya panelidagi mavjud bo'sh joyni to'ldirish uchun kengayishi mumkin bo'lgan navigatsiya elementlarini yaratish uchun
minmax()dan foydalaning. - Moslashuvchan Karta Maketlari: Turli ekran o'lchamlariga avtomatik ravishda moslashadigan karta maketlarini yaratish uchun
repeat(auto-fit, minmax())dan foydalaning, bu esa kartalarning kichikroq ekranlarda chiroyli tarzda o'ralishini ta'minlaydi. - Kontentga Sezgir Yon Panellar: Yon panellarni ularning kontentiga qarab o'lchash uchun
min-contentyokimax-contentdan foydalaning, bu ularga kerak bo'lganda kengayish yoki qisqarish imkonini beradi. - Qat'iy Kengliklardan Qoching: Turli ekran o'lchamlariga va foydalanuvchi afzalliklariga moslashadigan maketlarni yaratish uchun nisbiy birliklar (
%,fr,em) foydasiga qat'iy kengliklardan (px) foydalanishni minimallashtiring. - Puxta Sinovdan O'tkazing: To'g'ri ko'rsatilishini va izchil foydalanuvchi tajribasini ta'minlash uchun grid maketlaringizni har doim turli qurilmalar va ekran o'lchamlarida sinab ko'ring.
Grid O'lchamlarining Ilg'or Usullari
Asosiy kalit so'zlar va funksiyalardan tashqari, CSS Grid yo'lak o'lchamlarini nozik sozlash uchun yanada ilg'or usullarni taklif etadi.
repeat() Funksiyasi
repeat() funksiyasi bir xil o'lchamdagi bir nechta yo'laklarni yaratishni soddalashtiradi. U ikkita argumentni qabul qiladi: takrorlashlar soni va yo'lak o'lchami.
repeat(number, track-size)
Masalan:
grid-template-columns: repeat(3, 1fr);
Bu quyidagiga teng:
grid-template-columns: 1fr 1fr 1fr;
repeat() funksiyasi mavjud bo'sh joyga avtomatik ravishda moslashadigan sezgir grid maketlarini yaratish uchun auto-fit va auto-fill kalit so'zlari bilan ham ishlatilishi mumkin.
auto-fit va auto-fill Kalit So'zlari
Bu kalit so'zlar repeat() funksiyasi bilan birgalikda grid-dagi elementlar soniga va mavjud bo'sh joyga moslashadigan sezgir grid-larni yaratish uchun ishlatiladi. Ular orasidagi asosiy farq bo'sh yo'laklarni qanday boshqarishidadir.
auto-fit: Agar barcha yo'laklar bo'sh bo'lsa, yo'laklar 0 kenglikkacha yig'iladi.auto-fill: Agar barcha yo'laklar bo'sh bo'lsa, yo'laklar o'z o'lchamlarini saqlab qoladi.
Misol: Sezgir Ustunlar uchun auto-fit dan Foydalanish
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 10px;
}
Ushbu misolda, grid kamida 200px kengligida bo'lgan, ammo qolgan bo'sh joyni to'ldirish uchun kengayishi mumkin bo'lgan imkon qadar ko'p ustun yaratadi. Agar barcha ustunlarni to'ldirish uchun yetarli elementlar bo'lmasa, bo'sh ustunlar 0 kenglikkacha yig'iladi.
Xalqarolashtirish (i18n) va Mahalliylashtirish (l10n) uchun Mulohazalar
Global auditoriya uchun maketlar ishlab chiqishda turli tillar va yozuv yo'nalishlarining ta'sirini hisobga olish muhimdir. Matn uzunligi tillar o'rtasida sezilarli darajada farq qilishi mumkin, agar yo'lak o'lchamlari to'g'ri sozlanmagan bo'lsa, bu maketga ta'sir qilishi mumkin. Xalqarolashtirilgan maketlarni loyihalash uchun ba'zi maslahatlar:
- Nisbiy Birliklardan Foydalaning: Matnning foydalanuvchi shrift o'lchami afzalliklariga ko'ra o'lchamlanishiga imkon berish uchun piksellar kabi qat'iy birliklar o'rniga
em,remva foizlar kabi nisbiy birliklarni afzal ko'ring. - Ichki O'lcham: Yo'laklarning tildan qat'i nazar, kontent hajmiga moslashishini ta'minlash uchun
min-content,max-contentvafit-content()kabi ichki o'lcham kalit so'zlaridan foydalaning. - Mantiqiy Xususiyatlar: Chapdan o'ngga (LTR) va o'ngdan chapga (RTL) tillarni qo'llab-quvvatlash uchun
leftvarightkabi jismoniy xususiyatlar o'rnigainline-startvainline-endkabi mantiqiy xususiyatlardan foydalaning. - Sinov: Har qanday potentsial muammolarni aniqlash va hal qilish uchun maketlaringizni turli tillar va yozuv yo'nalishlari bilan sinab ko'ring. Turli tillarda topilishi mumkin bo'lgan uzunroq satrlarni simulyatsiya qiling.
Xulosa
CSS Grid yo'lak o'lchamlari sezgir va moslashuvchan veb-maketlarni yaratish uchun kuchli va ko'p qirrali vositadir. Ichki va tashqi o'lchamlar tushunchalarini o'zlashtirib, minmax() funksiyasini tushunib va repeat() funksiyasidan foydalanib, siz turli kontent va ekran o'lchamlariga mos ravishda moslashadigan maketlar yaratishingiz mumkin. Global auditoriya uchun loyihalashda xalqarolashtirish va mahalliylashtirish ta'sirini hisobga olishni unutmang.
Turli xil yo'lak o'lchamlari usullari bilan tajriba o'tkazing va CSS Gridning cheksiz imkoniyatlarini o'rganing. Amaliyot va ushbu tushunchalarni puxta tushunish bilan siz har qanday loyiha uchun murakkab va foydalanuvchilarga qulay veb-maketlarni yaratishga yaxshi tayyor bo'lasiz.