CSS Grid Track Funksiyalari: Responsiv Dizayn uchun Dinamik Maket O'lchami

CSS Grid veb-maketlarda inqilob qildi, misli ko‘rilmagan nazorat va moslashuvchanlikni taklif etdi. Uning qudrati markazida grid ichidagi qatorlar va ustunlar o‘lchamini belgilovchi track funksiyalari yotadi. Ushbu funksiyalarni tushunish va o‘zlashtirish turli ekran o‘lchamlari va kontent talablariga muammosiz moslashadigan responsiv va dinamik maketlar yaratish uchun juda muhimdir.

CSS Grid Track Funksiyalari nima?

Track funksiyalari grid yo‘laklari (qatorlar va ustunlar) o‘lchamini belgilash uchun ishlatiladi. Ular treklar orasida bo‘sh joy qanday taqsimlanishini aniqlash imkonini beradi, bu ham qat’iy, ham moslashuvchan o‘lchamlarga imkon beradi. Eng ko‘p ishlatiladigan track funksiyalari:

• fr (ulush birligi): Grid konteyneridagi mavjud bo‘sh joyning bir qismini ifodalaydi.
• minmax(min, max): Minimal va maksimal qiymat o‘rtasida o‘lcham diapazonini belgilaydi.
• auto: Yo'lakning o‘lchami uning ichidagi kontent bilan belgilanadi.
• fit-content(length): Yo'lakning o‘lchami o‘z kontentiga moslashadi, lekin hech qachon belgilangan uzunlikdan oshmaydi.

fr Birligi: Mavjud Bo'sh Joyni Taqsimlash

fr birligi, shubhasiz, track funksiyalarining eng kuchli va moslashuvchanidir. U sizga grid konteyneridagi mavjud bo‘sh joyni grid yo‘laklari orasida mutanosib ravishda taqsimlash imkonini beradi. fr birligi boshqa yo‘laklar o‘lchami belgilanganidan keyin qolgan bo‘sh joyning bir qismini ifodalaydi.

Asosiy Foydalanish

Quyidagi CSS'ni ko‘rib chiqing:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

            

              
                Copy
              
            
          

Bu uchta ustunli grid yaratadi. Birinchi va uchinchi ustunlarning har biri mavjud bo‘sh joyning 1/4 qismini, ikkinchi ustun esa 2/4 (yoki 1/2) qismini egallaydi. Agar grid konteyneri kengligi 600px bo‘lsa va qat’iy o‘lchamdagi ustunlar bo‘lmasa, birinchi va uchinchi ustunlarning har biri 150px, ikkinchi ustun esa 300px kengligida bo‘ladi.

fr'ni Qat'iy O'lchamdagi Yo'laklar bilan Aralashtirish

fr'ning haqiqiy kuchi qat'iy o'lchamdagi yo'laklar (masalan, piksellar, em, rem) bilan birlashtirilganda namoyon bo'ladi. Avval qat'iy o'lchamdagi yo'laklar o'lchami belgilanadi, so'ngra qolgan bo'sh joy fr birliklari o'rtasida taqsimlanadi.

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 2fr;
}

            

              
                Copy
              
            
          

Ushbu misolda birinchi ustun 200px qilib belgilangan. Agar grid konteynerining kengligi 600px bo'lsa, qolgan 400px ikkinchi va uchinchi ustunlar o'rtasida taqsimlanadi. Ikkinchi ustun qolgan bo'sh joyning 1/3 qismini (taxminan 133.33px), uchinchi ustun esa 2/3 qismini (taxminan 266.67px) oladi.

Misol: Global Navigatsiya Paneli

Chapda qat'iy kenglikdagi logotip, o'rtada aksariyat joyni egallaydigan qidiruv paneli va o'ngda qat'iy kenglikdagi foydalanuvchi hisobi ikonkalari to'plami bo'lgan global navigatsiya panelini tasavvur qiling.

            .nav-container {
  display: grid;
  grid-template-columns: 150px 1fr 100px; /* Logotip, Qidiruv, Hisob Ikonkalari */
}

.nav-logo {
  /* Logotip uslubi */
}

.nav-search {
  /* Qidiruv paneli uslubi */
}

.nav-account {
  /* Hisob ikonkalari uslubi */
}

            

              
                Copy
              
            
          

Bu yerda logotip ustuni 150px, hisob ikonkalari ustuni 100px kengligida, qidiruv paneli ustuni esa qolgan bo'sh joyni to'ldirish uchun kengayadi. Bu qidiruv panelining turli ekran o'lchamlariga moslashishini ta'minlaydi, shu bilan birga logotip va hisob ikonkalari uchun qat'iy o'lchamlarni saqlab qoladi.

minmax() Funksiyasi: O'lcham Diapazonlarini Belgilash

minmax() funksiyasi grid yo‘lagi uchun minimal va maksimal o‘lchamni belgilash imkonini beradi. Bu ortiqcha toshib ketish yoki haddan tashqari cho‘zilishning oldini olgan holda turli kontent uzunliklariga moslashadigan responsiv maketlar yaratish uchun juda foydalidir.

Asosiy Foydalanish

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, 300px) 1fr;
}

            

              
                Copy
              
            
          

Ushbu misolda birinchi ustunning kengligi kamida 100px va ko‘pi bilan 300px bo‘ladi. Agar birinchi ustundagi kontent 100px'dan ko‘proq joy talab qilsa, ustun 300px'ga yetguncha kengayadi. Shundan so‘ng u endi o‘smaydi va kontent toshib ketishi mumkin. Ikkinchi ustun qolgan bo‘sh joyni egallaydi.

minmax() ni auto bilan Birlashtirish

Keng tarqalgan foydalanish holatlaridan biri, yo‘lakning o‘z kontentiga qarab o‘sishiga imkon berish, lekin faqat ma'lum bir chegaragacha o‘sishi uchun minmax() ni auto bilan birlashtirishdir.

            .grid-container {
  display: grid;
  grid-template-columns: minmax(100px, auto) 1fr;
}

            

              
                Copy
              
            
          

Bu holda, birinchi ustunning kengligi kamida 100px bo‘ladi. Agar kontent 100px dan kengroq bo‘lsa, ustun uni sig‘dirish uchun kengayadi. Biroq, ustun faqat kontentni sig‘dirish uchun zarur bo‘lgan darajada kengayadi. Agar kontent 100px dan kam bo‘lsa, ustunning kengligi 100px bo‘ladi. Ikkinchi ustun yana qolgan bo‘sh joyni egallaydi.

Misol: Mahsulot Kartalari Gridi

Har bir kartaning minimal kenglikka ega bo'lishini, lekin mavjud bo'sh joyni to'ldirish uchun ma'lum bir maksimal darajaga qadar kengayishiga ruxsat berishni xohlagan mahsulot kartalari gridini ko'rib chiqing. Bu mahsulot sarlavhalari turli uzunlikda bo'lishi mumkin bo'lgan turli mamlakatlardan foydalanuvchilarga ega bo'lgan elektron tijorat veb-sayti uchun foydali bo'lishi mumkin.

            .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

.product-card {
  /* Mahsulot kartasi uslubi */
}

            

              
                Copy
              
            
          

Bu yerda repeat(auto-fit, minmax(200px, 1fr)) har birining minimal kengligi 200px bo'lgan iloji boricha ko'p ustunlar yaratadi. 1fr maksimal qiymati ustunlarning kengayishiga va mavjud bo'sh joyni to'ldirishiga imkon beradi. grid-gap kartalar orasiga masofa qo'shadi. Ekran o'lchami o'zgarganda, ustunlar soni mavjud bo'sh joyga moslashish uchun avtomatik ravishda sozlanadi, bu turli xil kelib chiqishi va qurilmalari bo'lgan foydalanuvchilar uchun responsiv maketni ta'minlaydi.

auto Kalit So'zi: Kontentga Asoslangan O'lcham

auto kalit so‘zi gridga yo‘lakni uning ichidagi kontentga asosan o‘lcham berishni buyuradi. Bu siz yo‘lakning o‘lchamini aniq belgilamasdan, uning kontentini sig‘dirish uchun yetarli darajada katta bo‘lishini xohlaganingizda foydalidir.

Asosiy Foydalanish

            .grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

            

              
                Copy
              
            
          

Ushbu misolda birinchi ustun o‘z kontentiga mos ravishda o‘lchamlanadi. Ikkinchi ustun qolgan bo‘sh joyni egallaydi.

Misol: Yon Panel Maketi

Chapda yon panel va o'ngda asosiy kontent maydoni bo'lgan maketni ko'rib chiqing. Yon panel o'z kontentini (masalan, navigatsiya havolalari ro'yxatini) sig'dirish uchun yetarlicha keng bo'lishi kerak, asosiy kontent maydoni esa qolgan bo'sh joyni egallashi kerak.

            .layout-container {
  display: grid;
  grid-template-columns: auto 1fr;
}

.sidebar {
  /* Yon panel uslubi */
}

.main-content {
  /* Asosiy kontent uslubi */
}

            

              
                Copy
              
            
          

auto kalit so‘zi yon panelning o‘z kontenti kengligiga moslashishini ta'minlaydi. Agar kontent qisqa bo‘lsa, yon panel tor bo‘ladi. Agar kontent uzun bo‘lsa, yon panel kengroq bo‘ladi. Bu navigatsiya menyularida potentsial ravishda turli til uzunliklariga ega global auditoriyaga mo‘ljallangan veb-ilovalar uchun mos bo‘lgan moslashuvchan va responsiv yon panel maketini yaratadi.

fit-content() Funksiyasi: Cheklangan Kontentga Asoslangan O'lcham

fit-content() funksiyasi auto ga o'xshaydi, lekin u yo‘lak uchun maksimal o‘lchamni belgilash imkonini beradi. Yo'lak o‘z kontentiga mos ravishda o‘lchamlanadi, lekin u hech qachon belgilangan uzunlikdan oshmaydi.

Asosiy Foydalanish

            .grid-container {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

Ushbu misolda birinchi ustun o‘z kontentiga mos ravishda o‘lchamlanadi, lekin u hech qachon 300px dan kengroq bo‘lmaydi. Agar kontent 300px dan ko‘proq joy talab qilsa, ustun 300px kengligida bo‘ladi va kontent CSS'ning `overflow` va `word-wrap` xususiyatlariga qarab toshib ketishi yoki o‘ralishi mumkin.

Misol: Tugmalar Guruhi

Bir qatorda ko‘rsatmoqchi bo‘lgan tugmalar guruhini tasavvur qiling. Siz tugmalarning o‘z kontentiga mos ravishda o‘lchamlanishini xohlaysiz, lekin ularning haddan tashqari kengayib, ko‘p joy egallashini xohlamaysiz.

            .button-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, fit-content(150px));
  grid-gap: 10px;
}

.button {
  /* Tugma uslubi */
}

            

              
                Copy
              
            
          

Bu yerda har bir tugma ustuni tugma matniga mos ravishda o‘lchamlanadi, lekin u hech qachon 150px dan kengroq bo‘lmaydi. Agar matn 150px dan uzunroq bo‘lsa, tugma matnni o‘rab oladi. Bu turli tugma matnlari uzunliklariga moslashadigan va shu bilan birga izchil vizual ko‘rinishni saqlaydigan tugmalar guruhini yaratadi.

Murakkab Maketlar uchun Track Funksiyalarini Birlashtirish

CSS Grid track funksiyalarining haqiqiy kuchi ularni murakkab va responsiv maketlar yaratish uchun birlashtirishdan kelib chiqadi. Mana bir nechta misollar:

1-misol: Moslashuvchan O'rta Ustunli Uch Ustunli Maket

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
}

            

              
                Copy
              
            
          

Bu birinchi ustuni 200px, ikkinchi ustuni qolgan bo‘sh joyni egallaydigan va uchinchi ustuni 150px kengligidagi uch ustunli maket yaratadi.

2-misol: Minimal Yon Panel Kengligiga Ega Maket

            .grid-container {
  display: grid;
  grid-template-columns: minmax(250px, auto) 1fr;
}

            

              
                Copy
              
            
          

Bu birinchi ustun (yon panel) minimal kengligi 250px bo‘lgan va o‘z kontentiga mos ravishda kengayadigan, ikkinchi ustun esa qolgan bo‘sh joyni egallaydigan ikki ustunli maket yaratadi.

3-misol: Dinamik Kontentli Teng Balandlikdagi Ustunlar

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(100px, auto); /* barcha qatorlarning balandligi kamida 100px bo'lishini ta'minlaydi */
}

            

              
                Copy
              
            
          

Bu uchta teng kenglikdagi ustun yaratadi. grid-auto-rows: minmax(100px, auto) dan foydalanish barcha qatorlarning balandligi kamida 100px bo'lishini ta'minlaydi va har bir grid elementi ichidagi kontentni sig'dirish uchun o'z balandligini avtomatik ravishda sozlaydi, bu esa grid bo'ylab vizual izchillikni saqlaydi.

CSS Grid Track Funksiyalaridan Foydalanish bo'yicha Eng Yaxshi Amaliyotlar

• Moslashuvchan o‘lcham uchun fr dan foydalaning: fr birligi mavjud bo‘sh joyni grid yo‘laklari orasida mutanosib ravishda taqsimlash uchun idealdir.
• O'lcham diapazonlari uchun minmax() dan foydalaning: minmax() funksiyasi yo‘lak uchun minimal va maksimal o‘lchamni belgilashga imkon beradi, bu uning ortiqcha toshib ketmasdan yoki haddan tashqari cho‘zilmasdan turli kontent uzunliklariga moslashishini ta'minlaydi.
• Kontentga asoslangan o‘lcham uchun auto dan foydalaning: auto kalit so‘zi yo‘lakning o‘z kontentini sig‘dirish uchun yetarlicha katta bo‘lishini xohlaganingizda foydalidir.
• Cheklangan kontentga asoslangan o‘lcham uchun fit-content() dan foydalaning: fit-content() funksiyasi o‘z kontentiga mos ravishda o‘lchamlangan yo‘lak uchun maksimal o‘lchamni belgilashga imkon beradi.
• Murakkab maketlar uchun track funksiyalarini birlashtiring: CSS Grid track funksiyalarining haqiqiy kuchi ularni murakkab va responsiv maketlar yaratish uchun birlashtirishdan kelib chiqadi.
• Maxsus ehtiyojlarga ta'sirini hisobga oling: Maketlaringiz nogironligi bo‘lgan foydalanuvchilar uchun qulay ekanligiga ishonch hosil qiling. Semantik HTML dan foydalaning va tasvirlar hamda boshqa matn bo‘lmagan elementlar uchun muqobil kontent taqdim eting.
• Turli qurilmalar va brauzerlarda sinovdan o‘tkazing: Maketlaringiz to‘g‘ri ko‘rsatilishi va responsiv ekanligiga ishonch hosil qilish uchun ularni turli qurilmalar va brauzerlarda sinchkovlik bilan sinovdan o‘tkazing.

Xulosa

CSS Grid track funksiyalari turli ekran o'lchamlari va kontent talablariga moslashadigan dinamik va responsiv maketlar yaratish uchun zarurdir. fr birligi, minmax() funksiyasi, auto kalit so'zi va fit-content() funksiyasini o'zlashtirib, siz barcha qurilmalarda ajoyib foydalanuvchi tajribasini taqdim etadigan moslashuvchan va kuchli maketlar yaratishingiz mumkin. Ushbu usullarni qo'llash sizga yanada mustahkam, moslashuvchan va global miqyosda qulay veb-ilovalarni yaratish imkonini beradi.