17-avgust, 2025O'zbek

fr, minmax(), auto-fit va auto-fill kabi yo'lak o'lcham birliklarini chuqur o'rganib, CSS Grid layout boshqaruvining kuchli imkoniyatlarini oching. Moslashuvchan va xalqarolashtirilgan veb-dizayn uchun ilg'or texnikalarni o'rganing.

CSS Grid yo‘lak o‘lchamlari: Global veb-tajribalar uchun murakkab layout boshqaruvini mukammal o‘zlashtirish

Veb-dasturlashning keng va doimiy rivojlanib borayotgan olamida mustahkam, moslashuvchan va sezgir maketlarni yaratish juda muhimdir. CSS Grid Layout kontentni ikki o'lchovli joylashtirishda misli ko'rilmagan nazoratni taklif qilib, ajralmas vositaga aylandi. Gridning asosiy tushunchalari nisbatan sodda bo'lsa-da, haqiqiy mahorat CSS Grid yo'lak o'lchamlarini tushunish va undan samarali foydalanishda yotadi. Ushbu keng qamrovli qo'llanma sizni yo'lak o'lchamlarini aniqlashning nozikliklariga chuqur olib boradi, bu esa sizga turli qurilmalar va global auditoriyalarda benuqson ishlaydigan yuqori darajada murakkab va moslashuvchan dizaynlarni yaratish imkonini beradi.

Yo‘lak o‘lchamlarini belgilash, sodda qilib aytganda, bu CSS Grid konteynerida ustunlaringiz kengligini va qatorlaringiz balandligini qanday belgilashingizdir. Bu brauzerga maketingizning har bir segmenti qancha joy egallashi kerakligini aytib beradigan mexanizmdir. Ushbu mexanizmlarni aniq tushunmasdan, sizning gridlaringiz qattiq ko'rinishi, turli kontent uzunliklariga moslasha olmasligi yoki turli ekran o'lchamlarida buzilishi mumkin. Kontent turli so'z uzunliklari yoki ko'rsatish uslublariga ega bo'lgan tillarga tarjima qilinishi mumkin bo'lgan global veb-tajribasi uchun dinamik va kontentga moslashuvchan yo'lak o'lchamlari shunchaki afzallik emas, balki zaruratga aylanadi.

Asos: Aniq belgilangan Grid yoʻlak oʻlchamlari

Aniq belgilangan grid yoʻlak oʻlchamlari grid-template-columns va grid-template-rows xususiyatlari yordamida ustunlar va qatorlaringiz oʻlchamlarini belgilashni oʻz ichiga oladi. Bu xususiyatlar yoʻlak oʻlchamlari roʻyxatini qabul qiladi, har biri gridingizdagi ustun yoki qatorga mos keladi.

Qatʼiy va nisbiy uzunlik birliklari

Yoʻlaklar oʻlchamini belgilashning eng oddiy usuli standart CSS uzunlik birliklaridan foydalanishdir. Ular bashorat qilinadigan, mutlaq yoki koʻrish oynasiga nisbiy oʻlchamlarni taʼminlaydi.

Mutlaq birliklar (px, in, cm, mm, pt, pc): Piksellar (px) eng keng tarqalganidir. Ular aniq, oʻzgarmas oʻlchamni taʼminlaydi, bu ikonlar yoki maʼlum boʻshliqlar kabi qatʼiy kenglikdagi elementlar uchun foydali boʻlishi mumkin. Biroq, ularning qatʼiyligi ularni turli ekran oʻlchamlariga moslashishi kerak boʻlgan yuqori darajada moslashuvchan maketlar uchun kamroq mos qiladi. px butun dunyoda tushunarli boʻlsa-da, faqat unga tayanish turli displey sozlamalari yoki qulaylik ehtiyojlari boʻlgan foydalanuvchilar uchun yaxshi masshtablanmaydigan maketlarga olib kelishi mumkin.
```
            .grid-container {
  display: grid;
  grid-template-columns: 100px 250px 150px; /* Qat'iy piksel kengliklariga ega uchta ustun */
  grid-template-rows: 50px auto;
}
            
              
            
          
```
Nisbiy birliklar (em, rem, vw, vh, %): Ushbu birliklar koʻproq moslashuvchanlikni taklif etadi. Ular oʻz qiymatlarini boshqa xususiyatlardan yoki koʻrish oynasidan oladi, bu ularni global auditoriya uchun tabiiy ravishda yanada moslashuvchan va qulay qiladi.
- em: Elementning oʻzining shrift oʻlchamiga (yoki aniq belgilanmagan boʻlsa, uning eng yaqin ota-onasiga) nisbatan. Komponent darajasida masshtablashni yaratish uchun ajoyib, bu komponent ichidagi boʻshliqlar va oʻlchamlar uning matn oʻlchamiga mutanosib boʻlishini taʼminlaydi.
```
            .grid-item {
  font-size: 16px;
}

.grid-container {
  display: grid;
  grid-template-columns: 8em 15em 8em; /* Konteynerning shrift o'lchamiga nisbatan ustunlar */
}
            
              
            
          
```
- rem: Ildiz html elementining shrift oʻlchamiga nisbatan. Bu koʻpincha umumiy sahifa masshtabi uchun afzal koʻriladi, chunki ildiz shrift oʻlchamini oʻzgartirish (masalan, qulaylik uchun) butun maketni mutanosib ravishda masshtablaydi. Bu, ayniqsa, brauzerining standart shrift oʻlchamini sozlaydigan global foydalanuvchilar uchun foydalidir.
```
            html {
  font-size: 100%; /* Yoki 16px */
}

.grid-container {
  display: grid;
  grid-template-columns: 6rem 12rem 6rem; /* Ildiz shrift o'lchamiga nisbatan ustunlar */
}
            
              
            
          
```
- vw (viewport width) va vh (viewport height): Koʻrish oynasining kengligi yoki balandligiga nisbatan. 1vw - koʻrish oynasi kengligining 1%i. Bular brauzer oynasi bilan toʻgʻridan-toʻgʻri masshtablanadigan, katta qahramon boʻlimlari yoki qurilmadan qatʼi nazar, har doim ekran maydonining maʼlum bir foizini egallashi kerak boʻlgan elementlar uchun ideal boʻlgan haqiqatan ham suyuq dizaynlar uchun ajoyibdir. Bu butun dunyo boʻylab barcha ekran oʻlchamlarida izchil vizual mutanosiblikni taʼminlaydi.
```
            .grid-container {
  display: grid;
  grid-template-columns: 10vw 80vw 10vw; /* Yon panellar har biri 10%, asosiy qism ko'rish oynasi kengligining 80% */
}
            
              
            
          
```
- % (foiz): Grid konteynerining oʻlchamiga nisbatan. Agar sizning grid konteyneringiz belgilangan kenglikka ega boʻlsa, ustun yoʻlaklari uchun foizlardan foydalanish ularni oʻsha konteyner kengligining maʼlum bir foizini egallashiga olib keladi. Bu belgilangan yoki mutanosib oʻlchamdagi ota-ona ichida boʻsh joyni taqsimlash uchun yaxshi. Biroq, foizlar grid boʻshliqlarini hisobga olmasligini yodda tuting, bu baʼzida ehtiyotkorlik bilan boshqarilmasa, kutilmagan toʻlib-toshishlarga olib kelishi mumkin.
```
            .grid-container {
  display: grid;
  grid-template-columns: 25% 50% 25%; /* Ustunlar konteyner kengligining 25%, 50%, 25% ini egallaydi */
}
            
              
            
          
```

Kasr birligi (`fr`)

Qatʼiy va foizli birliklar bashorat qilinadigan oʻlchamlarni taʼminlasa-da, kasr birligi (fr) mavjud boʻsh joyni grid yoʻlaklari oʻrtasida mutanosib ravishda taqsimlashning kuchli konsepsiyasini kiritadi. Ushbu birlik kontent koʻrish oynasiga dinamik ravishda moslashishi kerak boʻlgan suyuq, moslashuvchan maketlarni yaratish uchun ayniqsa bebahodir.

Yoʻlakni fr bilan belgilaganingizda, u brauzerga grid konteyneridagi qolgan mavjud boʻsh joyning bir qismini ajratishni aytadi. Masalan, agar sizda 1fr 2fr 1fr sifatida belgilangan uchta ustun boʻlsa, oʻrtadagi ustun birinchi yoki uchinchi ustunga qaraganda ikki baravar koʻp qolgan boʻsh joyni egallaydi. "Qolgan boʻsh joy" bu qatʼiy oʻlchamdagi yoʻlaklar (piksellar, emlar yoki kontent oʻlchamidagi yoʻlaklar kabi) oʻz ulushini olgandan keyin va har qanday gap qiymatlari hisobga olingandan keyin qolgan narsadir.

Asosiy kontent maydoni boʻsh joyning koʻp qismini egallashi kerak boʻlgan, kichikroq, teng oʻlchamdagi yon panellar bilan yonma-yon joylashgan stsenariyni koʻrib chiqing. fr birligi buni juda soddalashtiradi:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr; /* Yon panel | Asosiy kontent | Yon panel */
  gap: 20px; /* Yo'laklar orasidagi bo'shliq */
}

/* Kontekst uchun HTML tuzilmasi namunasi */
<div class="grid-container">
  <div class="sidebar-left">Navigatsiya</div>
  <div class="main-content">Maqola matni shu yerda joylashadi.</div>
  <div class="sidebar-right">Reklamalar</div>
</div>

Ushbu misolda, 3fr ustuni har qanday gap qiymatlari hisobga olingandan so'ng, 1fr ustunlarining kengligidan uch baravar ko'proq joy egallaydi. Bu sizning asosiy kontent maydoningiz brauzer oynasi bilan dinamik ravishda masshtablanishini ta'minlaydi va o'zining mutanosib ustunligini saqlab qoladi. Ushbu moslashuvchanlik fr ni zamonaviy, sezgir veb-dizaynning asosiga aylantiradi, bu esa maketlarning mobil telefonlardan ultra keng ish stoli displeylarigacha bo'lgan ko'plab ekran o'lchamlariga silliq moslashishiga imkon beradi va qurilmadan qat'i nazar, izchil foydalanuvchi tajribasini ta'minlaydi.

`auto` kalit so‘zi: Kontentga moslashuvchanlik

auto kalit so'zi CSS Grid'da moslashuvchanlik va kontentga e'tibor qaratishning kuchli aralashmasini taqdim etadi. Yo'lak o'lchami sifatida ishlatilganda, auto mavjud bo'sh joyni egallashi bilan fr ga o'xshab harakat qiladi, ammo muhim farq bilan: u o'z yo'lagi ichidagi kontentning o'lchamiga ustunlik beradi.

auto yo‘lagi o‘z kontentini sig‘dirish uchun kattalashadi (grid konteynerining o‘lchamigacha) va keyin bo‘sh joy cheklangan bo‘lsa, o‘zining minimal kontent o‘lchamiga qadar qisqaradi. Agar barcha boshqa yo‘laklar (qat’iy, fr va boshqalar) joylashtirilgandan so‘ng qo‘shimcha bo‘sh joy qolsa, har qanday auto yo‘laklari o‘sha qolgan bo‘sh joyni o‘zaro teng taqsimlaydi. Bu auto ni ma’lum kontent o‘z kengligi yoki balandligini o‘zi belgilashi kerak bo‘lgan maketlar uchun ayniqsa foydali qiladi.

Qat'iy yon panel va asosiy kontent maydoniga ega bo'lgan maketni ko'rib chiqing, u har doim o'z kontentiga mos kelishi, shuningdek, qolgan bo'sh joyni to'ldirish uchun kengayishi kerak:

            .grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr; /* Qat'iy yon panel | Kontentga moslashuvchan | Suyuq qolgan qism */
  gap: 10px;
}

/* Kontekst uchun HTML namunasi */
<div class="grid-container">
  <div class="sidebar">Qat'iy kenglikdagi navigatsiya</div>
  <div class="main-content">Ushbu kontent bu ustunning kengligini belgilaydi, lekin ayni paytda kengayadi ham.</div>
  <div class="info-panel">Moslashuvchan ma'lumot</div>
</div>

Ushbu sozlamada, birinchi ustun qat'iy 200px. Ikkinchi ustun, auto yordamida, avval o'z kontenti talab qilgan darajada keng bo'lishga harakat qiladi (to'lib ketmasdan). Keyin, uchinchi ustun, 1fr, qolgan barcha mavjud bo'sh joyni egallaydi. Agar 1fr ustuni o'z ulushini olgandan keyin ham bo'sh joy qolsa, auto ustuni o'sha qolgan bo'sh joyning bir qismini mutanosib ravishda to'ldirish uchun kengayadi. Ushbu aqlli xatti-harakat sizning gridingizning qismlari o'z kontenti bilan nafas olishiga imkon beradigan yuqori dinamik maketlarni yaratishga imkon beradi, bu esa global dasturda turli tillarni va o'zgaruvchan kontent uzunliklarini qo'llab-quvvatlash uchun bebaho hisoblanadi.

Ichki o‘lcham kalit so‘zlari: `min-content`, `max-content`, `fit-content()`

Ushbu kalit so'zlar grid yo'laklarining o'lchamini faqat ularning kontentining ichki o'lchamiga qarab belgilash imkonini beradi. Ular o'zlarida mavjud bo'lgan matn va elementlarga yuqori darajada moslashadigan maketlarni yaratishning kuchli usulini taklif qiladi, bu matn uzunligi va belgilar kengligi keskin o'zgarishi mumkin bo'lgan global kontent bilan ishlashda katta afzallikdir.

min-content: min-content bilan o'lchamlangan yo'lak o'z kontentini to'ldirmasdan iloji boricha kichik bo'ladi. Matn uchun bu eng uzun so'z yoki bo'linmas satrning kengligi degan ma'noni anglatadi. Rasmlar uchun bu ularning ichki minimal kengligi. Bu, ayniqsa, bo'sh joy cheklangan ko'p ustunli maketlarda, ustun o'z kontentini mahkam o'rab, keraksiz bo'sh joyni oldini olishni xohlaganingizda foydalidir.
```
            .grid-container {
  display: grid;
  grid-template-columns: min-content 1fr min-content; /* Ustunlar kontentga mos ravishda qisqaradi */
  gap: 15px;
}

<div class="grid-container">
  <div>Qisqa yorliq</div>
  <div>Bu turli tillar va yozuvlarda o'qilishi uchun keng joy talab qiladigan juda uzun kontent qismidir.</div>
  <div>Ma'lumot</div>
</div>
            
              
            
          
```
Ushbu misolda birinchi va uchinchi ustunlar faqat eng uzun so'zlarining kengligida bo'ladi, bu tilidan qat'i nazar, kerak bo'lgandan ko'proq joy egallamasligi kerak bo'lgan yorliqlar yoki qisqa holat ko'rsatkichlari uchun idealdir.
max-content: max-content bilan o'lchamlangan yo'lak, agar bu grid konteyneridan toshib ketishni anglatsa ham, hech qanday satr uzilishlarisiz yoki to'lib ketmasdan o'z kontenti xohlaganicha keng bo'ladi. Matn uchun bu, agar u bitta satrda bo'lsa, butun satrning kengligini anglatadi. Bu matnni hech qachon o'ramasligi kerak bo'lgan navigatsiya elementi kabi to'liq kontentini qisqartirmasdan doimo ko'rsatishi kerak bo'lgan elementlar uchun foydalidir.
```
            .grid-container {
  display: grid;
  grid-template-columns: max-content max-content 1fr; /* Ustunlar kontentni to'liq sig'dirish uchun kengayadi */
  gap: 10px;
}

<div class="grid-container">
  <div>Mahsulotning to'liq nomini ko'rsatish</div>
  <div>Mahalliylashtirilgan yetkazib berish ma'lumotlari</div>
  <div>Qolgan tafsilotlar</div>
</div>
            
              
            
          
```
Bu yerda, birinchi ikkita ustun o'z kontenti hech qachon o'ralmasligini ta'minlash uchun cho'ziladi, bu mahsulot nomlari yoki yuqori darajada mahalliylashtirilgan matn kabi muhim, qisqartirilmagan ma'lumotlarni ko'rsatish uchun juda muhim bo'lishi mumkin.
fit-content(): Bu, ehtimol, ichki o'lcham kalit so'zlarining eng ko'p qirralisidir, u auto, min-content va belgilangan maksimalning eng yaxshi jihatlarini birlashtiradi. fit-content(X) dan foydalanadigan yo'lak auto kabi harakat qiladi, lekin X (uzunlik yoki foiz qiymati) yoki uning max-content o'lchamidan, qaysi biri kichikroq bo'lsa, o'shandan oshmaydi. Biroq, u hech qachon o'zining min-content o'lchamidan pastga qisqarmaydi. Bu mohiyatan minmax(min-content, max(auto, X)) ga teng.

Bu kontentga asoslangan, ammo haddan tashqari o'sishni oldini olish uchun cheklangan yoki ma'lum bir nuqtaga qadar mavjud bo'sh joyni to'ldirishini ta'minlash uchun ustunlar yaratishda juda kuchli. Foydalanuvchi sharhlari bo'limini tasavvur qiling, u yerda sharhlar matniga mos ravishda kengayishi kerak, lekin o'rashdan oldin ma'lum bir kenglikdan oshmasligi kerak.
```
            .grid-container {
  display: grid;
  grid-template-columns: fit-content(300px) 1fr;
  gap: 20px;
}

<div class="grid-container">
  <div>Qisqa eslatma.</div>
  <div>Bu o'qilishi va o'ralishi kerak bo'lgan ancha uzun matn paragrafi. U o'rashdan oldin 300 piksel kenglikkacha kengayadi, bu hatto juda uzun tarjima qilingan jumlalar ham yaxshi o'qilishini saqlab qolishini va maketni haddan tashqari siqib chiqarmasligini ta'minlaydi.</div>
</div>
            
              
            
          
```
Birinchi ustun kamida o'zining min-content qiymatida bo'ladi va o'z kontenti bilan 300px gacha o'sadi, shundan so'ng u o'ralishni boshlaydi. Agar ko'proq bo'sh joy mavjud bo'lsa, u auto kabi harakat qiladi va o'z ulushini oladi. Ushbu dinamik moslashuvchanlik kontent uzunligi juda oldindan aytib bo'lmaydigan bir nechta tillarni qo'llab-quvvatlaydigan foydalanuvchi interfeyslari uchun bebaho hisoblanadi.

`minmax()` ning kuchi

Alohida yo'lak o'lchamlari birliklari kuchli bo'lsa-da, ularning haqiqiy kuchi minmax() funksiyasi ichida birlashtirilganda namoyon bo'ladi. minmax(min, max) funksiyasi grid yo'lagi uchun o'lchamlar diapazonini belgilaydi: yo'lak min dan kichik va max dan katta bo'lmaydi. Ham min, ham max har qanday yaroqli yo'lak o'lchami bo'lishi mumkin (uzunlik, foiz, fr, auto, min-content, max-content, fit-content()), bu esa minmax() ni mustahkam, sezgir maketlarni yaratish uchun nihoyatda ko'p qirrali qiladi.

minmax() tomonidan taqdim etilgan moslashuvchanlik turli ekran o'lchamlari va kontentga silliq moslashadigan maketlarni yaratish uchun juda muhimdir, bu global ilovalar uchun muhokama qilinmaydigan talabdir. U kontentning o'qib bo'lmaydigan darajada kichik bo'lib qolishining oldini olish uchun minimal cheklovlar qo'yishga imkon beradi, shu bilan birga mavjud bo'sh joydan samarali foydalanish uchun o'sish imkoniyatini beradi.

minmax() bilan keng tarqalgan naqshlar:

minmax(auto, 1fr): Bu juda moslashuvchan yo'lak o'lchamidir. Yo'lak kamida o'z kontenti (auto) kabi katta bo'ladi va agar ko'proq joy mavjud bo'lsa, mavjud kasr bo'shlig'ini iste'mol qilish uchun o'sadi (1fr). Bu o'z kontentining tabiiy o'lchamiga hurmat ko'rsatishi, lekin ayni paytda qolgan bo'sh joyni to'ldirish uchun cho'zilishi kerak bo'lgan asosiy kontent maydonlari uchun idealdir.

            .grid-container {
  display: grid;
  grid-template-columns: 200px minmax(auto, 1fr);
  /* Qat'iy yon panel, asosiy kontent qolgan bo'sh joyni to'ldiradi, lekin o'zining minimal kontent hajmini hurmat qiladi */
}

minmax(200px, 1fr): Bu yerda yo‘lak har doim kamida 200px kenglikda bo‘ladi, lekin agar ko‘proq bo‘sh joy mavjud bo‘lsa, u 1fr sifatida uni to‘ldirish uchun mutanosib ravishda o‘sadi. Bu, elementlar uchun minimal ko‘rinadigan o‘lchamni xohlaganingizda, lekin ayni paytda ularni kattaroq ekranlarda masshtablashni xohlaganingizda, rasm galereyalari yoki mahsulot ro‘yxatlari uchun a’lo darajada.
```
            .grid-container {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  /* Uchta ustun, har biri kamida 200 piksel, lekin mutanosib ravishda o'sib boradi */
}
            
              
            
          
```
minmax(min-content, max-content): Ushbu konfiguratsiya yo'lakning o'zini faqat o'z kontentiga qarab o'lchashiga olib keladi, hech qachon eng kichik mumkin bo'lgan o'lchamdan pastga qisqarmaydi va hech qachon ideal o'lchamidan (barcha kontentni bir satrga sig'dirish) tashqariga chiqmaydi. Bu ba'zida dinamik o'rash yoki bo'sh joyni to'ldirish istalmagan juda o'ziga xos, kontentga asoslangan komponentlar uchun foydalidir.

`repeat()` bilan samarali yoʻlak takrorlanishi

Yoʻlak oʻlchamlarini qoʻlda sanab oʻtish koʻplab bir xil ustunlar yoki qatorlarga ega boʻlgan gridlar uchun noqulay boʻlishi mumkin. repeat() funksiyasi belgilangan son marta yoki mavjud boʻsh joyga qarab dinamik ravishda takrorlanadigan yoʻlaklar naqshini aniqlashga imkon berib, buni soddalashtiradi.

Sintaksis repeat(count, track-list). count musbat butun son yoki auto-fill yoki auto-fit kabi kalit soʻzlar boʻlishi mumkin. track-list - bu bir yoki bir nechta yoʻlak oʻlchamlari.

            .grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* To'rtta teng ustun */
  grid-template-rows: repeat(2, 100px); /* Ikkita 100px qator */
}

Bu, ayniqsa, foto galereyalari yoki karta maketlari kabi bir xil gridlarni yaratish uchun toza va ixchamdir.

Dinamik takrorlash: `auto-fit` va `auto-fill`

repeat() ning moslashuvchan dizayn uchun haqiqiy kuchi, ayniqsa kontent va ekran o'lchamlari o'zgarib turadigan global kontekstda, auto-fit va auto-fill kalit so'zlari bilan birga keladi. minmax() bilan birlashtirilganda, bular ko'rish oynasi o'lchami yoki kontentdagi o'zgarishlarga yuqori darajada chidamli bo'lgan suyuq, o'z-o'ziga moslashuvchan gridlarni yaratadi. Ushbu naqsh ko'pincha "o'z-o'zini tiklaydigan" grid deb ataladi.

Ushbu dinamik xatti-harakat uchun sintaksis odatda grid-template-columns: repeat(auto-fit/auto-fill, minmax(, 1fr));

auto-fill: Ushbu kalit so'z brauzerga mavjud bo'sh joyni to'ldirish uchun imkon qadar ko'proq yo'laklar yaratishni aytadi, hatto barcha yo'laklarni to'ldirish uchun etarli grid elementlari bo'lmasa ham. Agar bo'sh yo'laklar yaratilsa, ular baribir joy egallaydi. Bu, hatto bitta element bo'lsa ham, izchil bo'shliqni ta'minlashni yoki bitta elementning qatorda juda keng cho'zilib ketishini oldini olishni xohlaganingizda foydalidir. Tasavvur qiling, siz har doim potentsial yangi elementlar yoki reklamalar uchun joy qoldirishni xohlaysiz, hatto ular hozir mavjud bo'lmasa ham.
```
            .product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

/* auto-fill bilan, agar 4 ta ustun uchun joy bo'lsa-yu, faqat 3 ta element bo'lsa, 4-ustun uyasi ko'rinadigan (bo'sh) bo'lib qoladi. */
            
              
            
          
```
auto-fit: Ushbu kalit so'z auto-fill bilan bir xil ishlaydi, tóki barcha mavjud elementlar joylashtirilmaguncha. Barcha elementlar joylashtirilgandan so'ng, auto-fill tomonidan yaratilgan har qanday bo'sh yo'laklar 0 kenglikka qisqaradi. Qolgan yo'laklar keyin mavjud bo'sh joyni to'ldirish uchun kengayadi. Bu odatda moslashuvchan elementlar gridlari uchun afzalroqdir, bu yerda siz potentsial yo'laklardan kamroq elementlar bo'lganda elementlarning cho'zilishini va barcha mavjud bo'sh joyni to'ldirishini xohlaysiz. Bu sizning elementlaringiz har doim to'lib ketmasdan iloji boricha katta bo'lishini ta'minlaydi va toza ko'rinishni taklif qiladi.
```
            .gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

/* auto-fit bilan, agar 4 ta ustun uchun joy bo'lsa-yu, faqat 3 ta element bo'lsa, 3 ta element to'liq kenglikni to'ldirish uchun kengayadi va 4-potentsial uyani qisqartiradi. */
            
              
            
          
```

auto-fill va auto-fit oʻrtasidagi tanlov asosan boʻsh joylarning koʻrinib turishini (auto-fill) yoki mavjud kontentning oʻsha boʻshliqlarni toʻldirish uchun kengayishini (auto-fit) afzal koʻrishingizga bogʻliq. Koʻpgina moslashuvchan gridlar uchun auto-fit estetik jihatdan yoqimliroq va boʻsh joydan samarali foydalanishni taʼminlaydi, ayniqsa elementlar soni oʻzgarishi mumkin boʻlganda. Ushbu dinamik moslashuv foydalanuvchi afzalliklari yoki backend maʼlumotlariga qarab kontent zichligi va elementlar soni keng miqyosda oʻzgarishi mumkin boʻlgan global auditoriyaga xizmat koʻrsatadigan veb-ilovalar uchun juda muhimdir.

Aniq belgilangandan tashqari: Yashirin Grid yo'lak o'lchamlari

Grid tuzilmangizning ko'p qismini grid-template-columns va grid-template-rows bilan aniq yo'laklar yordamida belgilasangiz-da, CSS Grid yashirin yo'laklar yaratish mexanizmiga ham ega. Bu yo'laklar siz grid elementini aniq belgilangan grid chegaralaridan tashqariga joylashtirganingizda yoki grid konteynerida uning aniq yo'lak ta'riflaridan ko'proq elementlar bo'lganda avtomatik ravishda yaratiladi.

Masalan, agar siz faqat ikkita ustunni aniq belgilasangiz, lekin keyin grid-column: 3; yordamida uchinchi elementni uchinchi ustunga joylashtirsangiz, o'sha elementni joylashtirish uchun yashirin uchinchi ustun yaratiladi. Xuddi shunday, agar sizda aniq qator ta'riflaridan ko'ra ko'proq grid elementlari bo'lsa, ularni joylashtirish uchun yashirin qatorlar qo'shiladi.

`grid-auto-columns` va `grid-auto-rows`

Odatiy bo'lib, yashirin yo'laklar auto yordamida o'lchamlanadi. Biroq, siz ushbu avtomatik yaratilgan yo'laklarning o'lchamlarini grid-auto-columns va grid-auto-rows yordamida boshqarishingiz mumkin. Ushbu xususiyatlar bitta yo'lak o'lchami qiymatini yoki qiymatlar ro'yxatini qabul qiladi (bu keyingi yashirin yo'laklar uchun takrorlanadi).

Bu, ayniqsa, siz qatorlar yoki ustunlarning aniq sonini oldindan bilmasligingiz mumkin bo'lgan dinamik kontent uchun juda foydali. Foydalanuvchilar tomonidan vidjetlar qo'shiladigan, kerak bo'lganda yangi qatorlar yaratishi mumkin bo'lgan boshqaruv panelini ko'rib chiqing:

            .dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 ta ustunni aniq belgilash */
  grid-auto-rows: minmax(150px, auto); /* Yashirin qatorlar kamida 150px bo'ladi, lekin kontent bilan o'sadi */
  gap: 20px;
}

/* Agar sizda 3 ustunli gridda 5 ta element bo'lsa, Grid 2 ta aniq qator va 1 ta yashirin qator yaratadi. */
/* Yashirin qator grid-auto-rows bilan o'lchamlanadi. */

Bu yerda, elementlarni joylashtirish orqali yashirin ravishda yaratilgan qatorlardan (yoki agar siz aniq qatorlarni belgilagan bo'lsangiz) tashqari har qanday qatorlar minmax(150px, auto) o'lchamlash qoidasiga amal qiladi. Bu dinamik kontent bloklari uchun minimal balandlikni ta'minlaydi, shu bilan birga ularga turli kontent uzunliklariga moslashish uchun kengayish imkonini beradi, bu qat'iy o'lchamlar ko'pincha amaliy bo'lmagan xalqaro kontent yoki foydalanuvchi tomonidan yaratilgan ma'lumotlar uchun juda muhimdir.

`grid-auto-flow`

To'g'ridan-to'g'ri yo'lak o'lchami xususiyati bo'lmasa-da, grid-auto-flow avtomatik joylashtirish algoritmini boshqarish orqali yashirin yo'laklar qanday yaratilishiga sezilarli darajada ta'sir qiladi. U grid elementlari avtomatik ravishda gridga qanday joylashtirilishini belgilaydi, bu esa o'z navbatida yashirin yo'laklar qachon va qaerda yaratilishini aniqlaydi.

row (standart): Elementlar qatorma-qator joylashtiriladi, kerak bo'lganda yangi qatorlar qo'shiladi. Bu eng keng tarqalgan xatti-harakat bo'lib, yashirin qatorlarga olib keladi.
column: Elementlar ustunma-ustun joylashtiriladi, kerak bo'lganda yangi ustunlar qo'shiladi. Bu yashirin ustunlarga olib keladi, ularning o'lchami keyinchalik grid-auto-columns tomonidan boshqariladi.
dense: Griddagi bo'shliqlarni oldinroq to'ldirishga harakat qiladi. Bu kamroq bashorat qilinadigan vizual tartibga, lekin ixchamroq maketga olib kelishi mumkin, bu esa qaysi yo'laklar yashirin bo'lishiga ta'sir qilishi mumkin.

Masalan, agar siz grid-auto-flow: column; ni oʻrnatgan boʻlsangiz va sizning aniq ustun taʼriflaringizdan koʻra koʻproq elementlaringiz boʻlsa, u holda grid-auto-columns oʻsha yangi, yashirin ustunlarni oʻlchash uchun juda dolzarb boʻlib qoladi.

Ilg'or texnikalar va real hayot stsenariylari

Endi biz asosiy va dinamik yo‘lak o‘lchamlari mexanizmlarini ko‘rib chiqdik, keling, bular qanday qilib murakkab, real hayotiy maketlarni yaratish uchun birlashishini o‘rganamiz, ular sezgir, qulay va global auditoriya uchun samarali bo‘ladi.

`repeat()` va `minmax()` bilan moslashuvchan maketlar

repeat() ni auto-fit/auto-fill va minmax(, 1fr) bilan birlashtirish, shubhasiz, haqiqatan ham sezgir gridlarni yaratish uchun eng kuchli naqshdir. Bu usul sizga ko'rish oynasi kichrayganda elementlar avtomatik ravishda yangi qatorlarga o'raladigan va u kattalashganda mavjud bo'sh joyni to'ldirish uchun kengayadigan gridni aniqlashga imkon beradi, bunda ustun o'zgarishlari uchun aniq media so'rovlariga ehtiyoj qolmaydi.

Elektron tijorat platformasi uchun mahsulotlarni ko'rsatish sahifasini ko'rib chiqing. Mahsulotlar katta ekranlarda bir nechta ustunlarda ko'rsatilishi, kichikroq qurilmalarda esa chiroyli tarzda joylashishi kerak. Mahsulot kartasi uchun minimal kenglik 250px bo'lishi mumkin, ammo u mavjud bo'sh joyni to'ldirish uchun egiluvchan bo'lishi kerak:

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

/* Ichida ko'plab <div class="product-card"> elementlari borligini tasavvur qiling. */
/* Keng ekranda siz 4 yoki 5 ta ustunni ko'rishingiz mumkin. */
/* Ekranni toraytirganingizda, u silliq ravishda 3, keyin 2, keyin 1 ustunga kamayadi, */
/* har bir karta ustunning kengligini to'ldirish uchun kengayadi. */

Ushbu bitta CSS deklaratsiyasi murakkab moslashuvchanlikni osonlikcha boshqaradi. Global elektron tijorat uchun, bu yerda mahsulot nomlari yoki tavsiflari turli tillarda ancha uzunroq yoki qisqaroq boʻlishi mumkin, bu naqsh mahsulot kartalarining har doim yaxshi koʻrinishini taʼminlaydi, ularning minimal oʻqiladigan hajmini saqlab qoladi va turli tarkibni maketni buzmasdan koʻrsatishga moslashadi. Bu moslashuvchan dizaynning asosiy toshidir.

Murakkab UI tuzilmalari: Sarlavha, Yon panel, Asosiy kontent, Olt qism

Umumiy sahifa maketini aniqlash uchun grid yo'lak o'lchamlarini grid-template-areas bilan birlashtirish semantik va yuqori darajada o'qiladigan yondashuvni taklif qiladi. grid-template-areas sizga maketingizning bo'limlarini nomlash imkonini beradi, bu esa tuzilmani juda aniq qiladi. Keyin siz ushbu maydonlarga mos keladigan qatorlar va ustunlarning o'lchamlarini aniqlaysiz.

Keng tarqalgan veb-sahifa tuzilmasini ko'rib chiqing: yuqorida sarlavha, yon panel bilan yonma-yon joylashgan asosiy kontent maydoni va pastda alt qism. Ushbu maket ustun va qator balandliklari ustidan aniq nazoratni talab qiladi.

            .page-layout {
  display: grid;
  grid-template-columns: 250px 1fr; /* Qat'iy yon panel, suyuq asosiy kontent */
  grid-template-rows: auto 1fr auto; /* Sarlavha balandligi kontentga qarab, asosiy kontent to'ldiradi, alt qism balandligi kontentga qarab */
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  min-height: 100vh; /* Maketning to'liq ko'rish oynasi balandligini egallashini ta'minlaydi */
}

.header { grid-area: header; background-color: #f8f8f8; padding: 20px; }
.sidebar { grid-area: sidebar; background-color: #e6e6e6; padding: 20px; }
.main-content { grid-area: main; background-color: #f0f0f0; padding: 30px; }
.footer { grid-area: footer; background-color: #f8f8f8; padding: 15px; }

/* HTML tuzilmasi namunasi */
<div class="page-layout">
  <header class="header">Sayt sarlavhasi</header>
  <aside class="sidebar">Asosiy navigatsiya</aside>
  <main class="main-content"><h1>Global platformamizga xush kelibsiz!</h1><p>Bu asosiy kontent maydoni.</p></main>
  <footer class="footer">Mualliflik huquqi 2024 ©</footer>
</div>

Ushbu sozlamada:

grid-template-columns: 250px 1fr; qat'iy kenglikdagi yon panel va qolgan barcha gorizontal bo'sh joyni egallaydigan asosiy kontent maydonini yaratadi.
grid-template-rows: auto 1fr auto; sarlavha va alt qismning balandligi ularning kontenti bilan belgilan_ishini ta'minlaydi, asosiy kontent qatori esa mavjud vertikal bo'sh joyni to'ldirish uchun kengayadi va alt qismni ko'rish oynasining pastiga suradi.

Ushbu yondashuv turli kontent balandliklariga (masalan, uzun tarjima qilingan sayt sarlavhasi boʻlgan sarlavha) yaxshi moslashadigan va ekran maydonidan optimal foydalanishni taʼminlaydigan mustahkam asosni taqdim etadi, bu esa madaniyatlar va qurilma turlari boʻylab izchil foydalanuvchi tajribasi uchun hayotiy ahamiyatga ega.

Dinamik kontent va xalqarolashtirishni boshqarish

Ilg'or Grid yo'lak o'lchamlarining global auditoriya uchun eng jozibali afzalliklaridan biri bu uning dinamik va xalqarolashtirilgan kontentga tabiiy moslashuvchanligidir. Matn uzunligi, belgilar to'plamlari (masalan, CJK belgilari va Lotin belgilari) va hatto o'qish yo'nalishlari (Chapdan o'ngga va O'ngdan chapga) kontent talab qiladigan vizual bo'shliqni keskin o'zgartirishi mumkin.

min-content, max-content, auto, va fit-content(): Bu ichki o'lcham kalit so'zlari bebaho. Masalan, til tanlovi bo'lgan navigatsiya paneli har bir til opsiyasi uchun min-content dan foydalanishi mumkin, bu tugma "English," "Deutsch," yoki "日本語" bo'lishidan qat'i nazar, faqat joriy til matni kengligida bo'lishini ta'minlaydi. Bu keraksiz bo'sh joyni oldini oladi va UI ni ixcham saqlaydi. Agar ustunda foydalanuvchi tomonidan yaratilgan kontent bo'lsa, minmax(min-content, 1fr) uning o'qilishi mumkinligini, lekin ayni paytda sezgirligini ta'minlaydi, bu esa to'lib ketish muammolarini oldini oladi.
```
            .language-switcher {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min-content; /* Har bir til tugmasi o'z matnining kengligida bo'ladi */
  gap: 10px;
}
            
              
            
          
```

fr birligi: Uning mutanosib tabiati matn uzunliklari turlicha bo'lganda bo'sh joyni taqsimlash uchun ajoyib tanlov qiladi. Agar sizda mahsulot xususiyatlari uchun uchta ustun bo'lsa va bir xususiyat tavsifi ma'lum bir tilda ayniqsa uzun bo'lsa, fr birligi barcha ustunlarning maketni buzmasdan yoki qisqartirishga majbur qilmasdan mavjud kenglikni silliq taqsimlashini ta'minlaydi, bu esa barcha hududlarda o'qilishini saqlab qoladi.

            .feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Har bir xususiyat bo'sh joydan teng ulush oladi */
  gap: 15px;
}

/* Agar biror xususiyatning nemis tilidagi tavsifi ingliz tilidagidan ancha uzun bo'lsa, */
/* 1fr birliklari ustunlarning silliq moslashishini ta'minlaydi. */

O'ngdan-chapga (RTL) tillar: CSS Gridning yo'lak o'lchamlari xususiyatlari o'zlari asosan yo'nalishdan mustaqil bo'lsa-da (`start` va `end` mantiqiy xususiyatlar bo'lgani uchun), aniq o'lchamlarning vizual ta'sirini hisobga olish kerak. Masalan, LTRda chapda `200px` qat'iy kenglikdagi yon panel RTLda chapda (yoki `inline-start`) `200px` kengligida qoladi. Biroq, yo'laklar ichidagi kontent uchun `min-content` va `max-content` tabiiy ravishda matn oqimiga moslashadi, bu esa Gridni tegishli HTML `dir` atributlari bilan birlashtirilganda xalqarolashtirish uchun ajoyib tanlov qiladi.

CSS Grid bilan global veb-ishlab chiqish uchun eng yaxshi amaliyotlar

Yo‘lak o‘lchamlarini o‘zlashtirish ajoyib veb-tajribalar yaratishning faqat bir qismidir. Grid maketlaringiz haqiqatan ham mustahkam, kengaytiriladigan va global auditoriya uchun inklyuziv bo‘lishini ta’minlash uchun ushbu eng yaxshi amaliyotlarni ko‘rib chiqing:

Samaradorlik masalalari

CSS Grid brauzer dvigatellari tomonidan yuqori darajada optimallashtirilgan bo'lsa-da, ayniqsa murakkab maketlar yoki ko'p sonli grid elementlari bilan ishlashda samaradorlik uchun hali ham e'tiborga olinadigan jihatlar mavjud:

Samarali CSS: Grid ta'riflaringizni toza va ixcham saqlang. Mutlaqo zarur bo'lmasa, haddan tashqari murakkab ichki gridlardan saqlaning. Oddiyroq vazifalar uchun ko'pincha bitta grid konteksti etarli bo'ladi.
Layout siljishlarini minimallashtiring: Grid tuzilmangizning barqarorligini ta'minlang. Aniq yo'lak o'lchamlarini (yoki qat'iy minimumlar bilan `minmax()`) ishlatish, ayniqsa sekin tarmoqlarda yoki turli global mintaqalarda keng tarqalgan qurilmalarda foydalanuvchi tajribasi va veb-hayotiy ko'rsatkichlariga zararli bo'lgan sezilarli maket siljishlarini oldini olishga yordam beradi.
Mantiqiy xususiyatlar: Tegishli hollarda inline-start, block-end, margin-inline, padding-block kabi mantiqiy xususiyatlardan foydalaning. Bular to'g'ridan-to'g'ri yo'lak o'lchamlariga ta'sir qilmasa-da, ular turli yozuv rejimlarini (LTR, RTL, vertikal yozuvlar) xalqarolashtirish uchun noqulay o'zgartirishlarga muhtoj bo'lmasdan tabiiy ravishda hurmat qiladigan yanada moslashuvchan va kelajakka mo'ljallangan CSS yozishni rag'batlantiradi.

Qulaylik (A11y)

Yaxshi tuzilgan grid, shuningdek, ekran o'quvchilari kabi yordamchi texnologiyalardan foydalanadigan barcha foydalanuvchilar uchun qulay bo'lishi kerak. Gridning vizual tartibini o'zgartirish qobiliyatlari, kuchli bo'lishiga qaramay, ba'zan vizual tartibni DOM (Hujjat Ob'ekt Modeli) tartibidan ajratishi mumkin, bu esa ekran o'quvchilari amal qiladigan narsadir.

DOM tartibiga ustunlik bering: Iloji boricha, HTML manba kodingizni mantiqiy oʻqish tartibida joylashtiring. Vizual taqdimot uchun Griddan foydalaning, ammo asosiy semantik tuzilma izchil boʻlib qolishini taʼminlang. Bu oʻz tarkibingizni boshqarish uchun yordamchi texnologiyalarga tayanadigan barcha fonlardan foydalanuvchilar uchun juda muhimdir.
Aniq boʻlish uchun grid-template-areas dan foydalaning: grid-template-areas dan foydalanganda, semantik nomlar (masalan, "header", "nav", "main", "footer") sizning maketingizni ishlab chiqish jarayonida tushunarliroq qilishi va agar ularni intuitiv ravishda xaritalasangiz, yaxshiroq tashkil etilgan HTMLga hissa qoʻshishi mumkin. grid-template-areas DOM tartibiga taʼsir qilmasa-da, u koʻpincha mantiqiy kontent oqimiga mos keladigan maqsadliroq maket dizaynini ragʻbatlantiradi.
Yordamchi texnologiyalar bilan sinovdan oʻtkazing: Har doim grid maketlaringizni ekran oʻquvchilari (masalan, NVDA, JAWS, VoiceOver) bilan sinovdan oʻtkazing, vizual qayta tartiblashdan qatʼi nazar, kontent mazmunli va navigatsiya qilinadigan tartibda taqdim etilishiga ishonch hosil qiling. Bu haqiqatan ham inklyuziv global veb-tajribalarini yaratish uchun muhokama qilinmaydigan qadamdir.

Saqlanuvchanlik va Kengaytiriluvchanlik

Loyihalaringiz oʻsib, rivojlanib borar ekan, yaxshi tashkil etilgan va saqlanuvchan CSS muhim ahamiyatga ega boʻladi. Bu, ayniqsa, turli til va taʼlim darajasidagi dasturchilar bilan hamkorlikdagi muhitlarda toʻgʻri keladi.

Grid chiziqlari va maydonlarini nomlang: Grid chiziqlari (masalan, `grid-template-columns: [main-start] 1fr [main-end];`) va maydonlar (`grid-template-areas` orqali) uchun maxsus nomlardan foydalaning. Bu oʻqilishi osonligini oshiradi va jamoa aʼzolariga raqamli chiziq pozitsiyalarini yodlashga hojat qoldirmasdan maketning maqsadini tushunishni osonlashtiradi. Aniq nomlash qoidalari universal foydalidir.
CSS Maxsus Xususiyatlari (Oʻzgaruvchilar): Umumiy yoʻlak oʻlchamlari, boʻshliqlar yoki toʻxtash nuqtalarini aniqlash uchun CSS Maxsus Xususiyatlaridan (`--variable-name`) foydalaning. Bu dizayn qarorlarini markazlashtiradi, oʻzgartirishlarni osonlashtiradi va murakkab maketlarda izchillikni taʼminlaydi. Masalan, barcha boʻshliqlar amal qiladigan `--spacing-unit` ni aniqlang.
```
            :root {
  --grid-gap: 20px;
  --sidebar-width: 280px;
}

.page-layout {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: var(--grid-gap);
}
            
              
            
          
```
Murakkab gridlarni qismlarga ajrating: Juda murakkab dizaynlar uchun murakkablikni boshqarish uchun ichki gridlar yoki subgridlardan (keng qoʻllab-quvvatlanganda) foydalanishni koʻrib chiqing. Subgrid grid elementiga oʻzining ota-onasining grid yoʻlak taʼriflarini meros qilib olishga imkon beradi, bu esa kattaroq grid kontekstida juda nozik nazoratni taklif qiladi.

Brauzerlararo moslik va zaxira variantlari

CSS Grid butun dunyo bo'ylab zamonaviy brauzerlarda ajoyib qo'llab-quvvatlanishiga qaramay, uning mosligini tushunish va zaxira variantlari yoki progressiv yaxshilanishlarni ta'minlash hali ham mas'uliyatli ishlab chiqish amaliyotidir.

Zamonaviy brauzerlarni qo'llab-quvvatlash: CSS Grid barcha asosiy doimiy yangilanadigan brauzerlarda (Chrome, Firefox, Safari, Edge) keng qo'llab-quvvatlanadi va bir necha yildan beri shunday. Zamonaviy veb-foydalanuvchilarga mo'ljallangan ko'pgina yangi loyihalar uchun keng qamrovli zaxira variantlari ko'pincha keraksizdir.
@supports qoidasi: Eski brauzerlarni o'z ichiga olishi mumkin bo'lgan muhitlar uchun @supports CSS at-qoidasidan foydalanib, Grid uslublarini faqat brauzer ularni qo'llab-quvvatlasa qo'llang. Bu sizga qo'llab-quvvatlamaydigan brauzerlar uchun oddiyroq (masalan, Flexbox yoki hatto blok-darajadagi) maketni zaxira sifatida taqdim etish imkonini beradi, bu esa buzilgan tajriba o'rniga silliq degradatsiyani ta'minlaydi.
```
            .container {
  /* Zaxira uslublar (masalan, display: flex yoki oddiy blok maketi) */
  display: flex;
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    /* Gridga xos uslublar */
  }
}
            
              
            
          
```
Ushbu yondashuv, hatto murakkab grid maketi eski brauzerlarda toʻliq koʻrsatilmagan boʻlsa ham, sizning kontentingiz har doim qulay boʻlishini taʼminlaydi. U butun dunyo boʻylab foydalanuvchilarning turli texnologik landshaftlarini hurmat qiladi.

Xulosa

CSS Grid yoʻlak oʻlchamlarini belgilash kuchli, moslashuvchan va adaptiv veb-maketlarning asosidir. fr, auto, min-content, max-content kabi birliklarni va minmax() funksiyasini repeat(auto-fit/auto-fill, ...) orqali dinamik takrorlash bilan birgalikda tushunish va samarali foydalanish orqali siz oʻz dizaynlaringiz ustidan misli koʻrilmagan nazoratga ega boʻlasiz.

Ushbu ilgʻor texnikalar dasturchilarga koʻplab ekran oʻlchamlari, kontent uzunliklari va hatto xalqarolashtirish talablariga silliq moslashadigan, shu bilan birga aniqlik va samaradorlikni saqlaydigan yuqori darajada moslashuvchan foydalanuvchi interfeyslarini yaratish imkonini beradi. Murakkab boshqaruv paneli maketlaridan tortib, moslashuvchan elektron tijorat mahsulot gridlarigacha, yoʻlak oʻlchamlarini oʻzlashtirish veb-dizayn uchun yangi imkoniyatlar olamini ochadi.

CSS Gridning yoʻlak oʻlchamlarini belgilash kuchini oʻzlashtiring. Ushbu xususiyatlar bilan tajriba qiling, ularni yangi usullarda birlashtiring va maketlaringiz qanday qilib mustahkamroq va chidamliroq boʻlishini kuzating. Bugunoq ushbu ilgʻor texnikalarni oʻz loyihalaringizga integratsiya qilishni boshlang va vaqt sinovidan oʻtadigan va raqamli dunyo duch keladigan har qanday qiyinchilikka moslashadigan haqiqatan ham ajoyib va global miqyosda qulay veb-tajribalar yarating.