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;
}

            

              
                Copy
              
            
          

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'rnatilgan min-width/min-height qiymatlari 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'lak max-content va belgilangan length qiymatlaridan 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;
}

            

              
                Copy
              
            
          

            <div class="grid-container">
  <div class="item1">Supercalifragilisticexpialidocious</div>
  <div class="item2">Short text</div>
</div>

            

              
                Copy
              
            
          

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;
}

            

              
                Copy
              
            
          

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;
}

            

              
                Copy
              
            
          

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;
}

            

              
                Copy
              
            
          

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)
            

              
                Copy
              
            
          

• 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;
}

            

              
                Copy
              
            
          

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;
}

            

              
                Copy
              
            
          

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-content yoki max-content dan 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)
            

              
                Copy
              
            
          

Masalan:

            grid-template-columns: repeat(3, 1fr);
            

              
                Copy
              
            
          

Bu quyidagiga teng:

            grid-template-columns: 1fr 1fr 1fr;
            

              
                Copy
              
            
          

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;
}

            

              
                Copy
              
            
          

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, rem va 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-content va fit-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 left va right kabi jismoniy xususiyatlar o'rniga inline-start va inline-end kabi 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.