CSS Grid uchun yangi boshlanuvchilar uchun qo'llanma

Greg Rakozining

Men CSS Grid haqida birinchi marta 2016 yil oxirida eshitdim. Men birinchi Tech Ladies® yig'ilishlarida o'tirgan edim va tinglovchilar bu qanday ajoyib ekanligini aytishdi. Bir yarim yildan keyin tez oldinga siljiting va men oxir-oqibat Gridga chuqurroq kirib boraman. Flexbox-ning sodiq foydalanuvchisi sifatida men bu qanday qilib o'yinni o'zgartirishi haqida ayta olaman.

CSS Grid haqida bilishni boshlaganimda, eng katta savol: Grid Flexbox-dan qanday farq qiladi? Va men umuman Grid Flexbox qila oladigan hamma narsani qila olishini bilib oldim. Ba'zi odamlar Grid ko'p o'lchovli sxemalar uchun, Flexbox esa bir o'lchovli sxemalar uchun ishlatilishi kerak degan fikrda. Ammo Grid bir o'lchovli tartibda ham juda yaxshi - ayniqsa agar siz keyinroq qaytib kelsangiz va ushbu tartibni ko'p o'lchovli qilishni xohlasangiz.

CSS tarmog'ini o'rnatish

Gridni sozlash juda oson - buning uchun CSS-ning ikki qatori kerak bo'ladi.

HTML

  
1
  
2
  
3
  
4
  
5
  
6

CSS

.
    displey: panjara;
    panjara-shablon-ustunlar: 10rem 10rem 10rem;
}

Va voila! Sizda panjara bor. Jiddiy ravishda, bu sizga kerak bo'lgan yagona narsa. Juda zo'r.

Flexbox-ni ekranga o'rnatishda farqli o'laroq: flex, displeyni qo'shish: panjara o'rashingiz darhol farq qilmaydi. Buning sababi shundaki, siz o'zingizning panjaraingizga nechta ustun kerakligini aniq belgilab bermaysiz. Buni yuqoridagi kabi shablon-shablonli ustunlar bilan qilasiz. Shunday qilib, ushbu misolda men uchta ustunni o'rnataman, ularning har biri 10 metrga teng.

CSS-ning asosiy tarmog'i

Siz panjara-shablon ustunlarini o'rnatishda xohlagan qiymatingizdan foydalanishingiz mumkin, ammo agar siz 100% qo'shishga harakat qilmasangiz, foizlardan uzoqroq turishni maslahat beraman. Buning sababi shundaki, siz ozgina hiyla-nayrangga olib kelishi mumkin bo'lgan ozgina bo'sh joy miqdorini hisobga olishga majbur bo'lasiz.

Aniq va ravshan treklar

Aniq va yashirin treklar haqida gapirishdan oldin, avval treklar nima ekanligini gaplashaylik. Izlar - bu ustunlar va satrlar qanday raqamlanganligi. Alohida ustunlar va satrlarni o'z-o'zidan hisoblashning o'rniga, siz ularni CSS Grid-da trek chiziqlari bo'yicha sanaysiz. Mana biz boshlagan panjara - barcha treklarni va ustunlarni sanab chiqdim, sizga ko'rinishi biroz osonlashadi.

Ruxsat berilgan va satr qatorlari ko'rsatilgan CSS katakchasi

Ko'rishingiz mumkinki, bizda aslida to'rtta va uchta qatorli satrlar mavjud. Bu sizning narsalaringizni panjara ustiga qo'yishda yordam beradi.

Qisqacha eslatma: agar siz Firefox-ning Tuzuvchi nashrini (oddiy Firefox-ning beta-versiyasidan) foydalanayotgan bo'lsangiz, unda ustun va satr treklari raqamlarini ko'rish uchun ajoyib dasturiy ta'minot mavjud. Agar siz o'rash elementingizni tekshirib ko'rsangiz va tartib yorlig'iga o'tsangiz, o'rashingiz uchun katakchani belgilang va endi sizning panjaraingiz quyida ko'rinishga ega bo'ladi Umid qilamanki, Chrome kelajakda bunday xususiyatlarni qo'shadi. Bu juda foydali.

Firefox Developer Edition inspektorining vositalari

Keling, aniq va yashirin treklarning farqiga qaytaylik. Agar biz yuqoridan kodimizni olsak, biz faqat ustunlarimizni o'rnatganimizni ko'rasiz. Bunday holda biz ustunlarimizni uchtataga aniq belgilab qo'ydik, ammo biz qatorlarni aniq belgilab qo'ydik. Bizda oltita element bor, ammo bu barcha elementlar uchta ustunga sig'maydi, shuning uchun ikkinchi qator aniq belgilanmaydi.

Bu biroz chalkashlikdir, shuning uchun aniq va yashirin treklarning orasidagi farqni ko'rish uchun o'zingizga CSS Grid bilan chalkashishni maslahat beraman.

Grid-Gapni qo'shish

Panjara oralig'i kabi o'ylab ko'ring, agar u faqat elementlar orasida qo'shilsa, panjara tashqarisida bo'lmaydi. Flexbox tarmog'idagi elementlarga marj qo'shganimda, men shunchaki panjara o'rashiga borib, bir xil miqdordagi marshrutni, lekin manfiy belgilashim kerak, chunki bu panjara tashqarisidagi chegarani qoplash uchun kerak. Yaxshiyamki CSS Grid-da, siz bu bilan shug'ullanishingiz shart emas.

Keling, yuqorida bizning CSS misolimizni ko'rib chiqamiz va ba'zi bo'shliqlarni qo'shamiz.

.
  displey: panjara;
  panjara-shablon-ustunlar: 10rem 10rem 10rem;
  panjara oralig'i: 1rem;
}
Crem panjara 1 dyuymli panjara bilan

Men stenografiya xususiyatidan foydalanganman, lekin siz panjara-ustun-bo'shlik va grid-qator-bo'shlik yordamida ustunlar va satrlar uchun aniq qiymatni belgilashingiz mumkin.

* Eslatma: Chrome 66 tarmog'idagi bo'shliqni bo'shliqqa va grid-ustun-bo'sh / panjara-qator-bo'shliqni ustun-bo'sh / qator-bo'shliqqa o'zgartiradi.

Takrorlash () funktsiyasi

Barchasini bir xil kenglikdagi uchta ustunli panjara-shablon-ustunlaridan foydalanganda har bir ustuningiz qanchalik baland bo'lishini aniqlash juda oddiy. Ammo agar siz undan ko'proq ustunlar kerak bo'lsa, bu juda ko'p terish. Takrorlash () funktsiyasi kelgan joy.

Bu erda biz qo'shilgan takrorlash () funktsiyasidan foydalangan bizning misolimiz.

.
  displey: panjara;
  panjara-shablon-ustunlar: takrorlash (3, 10rem);
  panjara oralig'i: 1rem;
}

CSS-da ko'rib turganingizdek, men uchta ustunni o'rnataman, ularning har biri kengligi 10 metrga teng. Ushbu panjara bizning panjara taqsimoti misolida ko'rsatilgan panjara kabi ko'rinadi. Repetitsiya () funktsiyasidan foydalanib, biz ko'p ustunlarni o'rnatmoqchi bo'lganingizda, biz yozishni biroz sodda va osonroq qilamiz.

Fraksion birliklar

Fraksion birliklar yoki fr, bu CSS Grid bilan kiritilgan yangi CSS uzunlik birligidir va men o'zim har doim foydalanib turganimni ko'ra olaman. Aytaylik, barchasiga teng kenglikdagi uchta ustun kerak. Elementlarga kenglik o'rnatishning o'rniga: calc (100% / 3), biz kasrli birliklardan foydalanishimiz mumkin. Fraktsion birliklarni "bo'sh joy" deb o'ylang.

Biz foydalangan misol bilan davom etaylik.

.
  displey: panjara;
  panjara-shablon-ustunlar: 1fr 1fr 1fr;
  panjara oralig'i: 1rem;
}

Men o'zgartirgan yagona narsa bu shablon-shablon-ustunlar bo'lganini ko'rasiz. Endi men brauzerga uchta ustun kerakligini va har bir ustun bitta bitta kasr yoki bitta "bo'sh joy" olishini aytaman. Bu Flexboxning moslashuvchan xususiyatiga juda o'xshash.

Fraksiya birliklari yordamida CSS panjara

Har bir element oldingi misolimizga qaraganda biroz kengroq bo'lishining sababi shundaki, ular hozircha uchta ustunga moslashganda iloji boricha ko'proq joy egallamoqda. Bu holda men qattiq kenglik o'rnatmadim, shuning uchun ular mening ekranimni to'liq kengaytiradilar. Buni o'zingizning ekranda ko'rinmasdan turib ko'rish juda qiyinligini bilaman, shuning uchun men buni o'zingiz bilan aralashtirishni tavsiya qilaman.

Siz ham barcha ustunlaringizni 1km qilib belgilashingiz shart emas. Quyida men birinchi va uchinchi ustunimni 10rems-ga o'rnatgan misol, mening o'rtam - 1fr. Shuningdek, siz ustunlaringizni 2fr, 3fr va hokazolarga o'rnatishingiz mumkin, va ustunlar uchun joylar 2x, 3x (va hokazo) bo'sh joy hajmini oladi.

Faqat o'rta ustun bilan 1fr ga o'rnatilgan CSS Grid

Individual panjara buyumlarini o'lchash

Keling, individual panjara buyumlarimizni o'lchash haqida gaplashaylik. Siz alohida elementlarga qattiq kenglik o'rnatolmaysiz, chunki biz kenglikni panjara-shablon-ustunlar bilan aniq o'rnatganmiz. Ammo bizning misolimizdagi beshinchi element bir nechta ustunlarning kengligi bo'lishini xohlasangiz nima bo'ladi? Buni panjara ustuni va span yordamida amalga oshirishimiz mumkin.

.
  displey: panjara;
  panjara-shablon-ustunlar: takrorlash (3, 10rem);
  panjara oralig'i: 1rem;
}
.item5 {
  panjara ustuni: 2-qator;
}

Beshinchi elementning panjara ustunini ikkitadan, beshinchi element esa ikkita ustunning kengligidan iborat bo'lishini yuqorida ko'rasiz.

CSS-ning alohida elementi joylashgan

Ammo beshta elementdan uchta ustunni o'z ichiga olsangiz nima bo'ladi? Bu shunday bo'ladi.

CSS panjara beshta elementni uchta ustunga sig'diradi

Beshinchi element tabiiy ravishda ikkinchi ustundan boshlanadi, biz o'rnatgan umumiy kenglikni o'z ichiga oladigan joyimiz yo'q. Shunday qilib, u keyingi qatorga o'tadi. Agar siz bir nechta satrlarni o'zlashtirishni xohlasangiz, xuddi shu tushunchani panjara ustunidan panjara qatoriga qo'llashingiz mumkin.

Beshinchi qatordan pastga siljigan bo'sh joyni tuzatish uchun juda oddiy echim mavjud. Bu siz satr yoki ustunlar qatoriga o'rnatilmasligingiz uchun ishlatilishi mumkin - grid-avtomatik oqim: zich.

.
  displey: panjara;
  panjara-shablon-ustunlar: takrorlash (3, 10rem);
  panjara oralig'i: 1rem;
  panjara-avtomatik oqim: zich;
}
.item5 {
  panjara ustuni: 3-qator;
}

CSS Grid-da, panjara avtomatik ravishda elementlarning mos kelishini tekshiradi. Yuqorida aytib o'tganimdek, agar biror narsa mos kelmasa, u keyingi qatorga o'tadi. Grid-avto-oqim: zich panjara bu bo'sh joylarni mos keladigan har qanday element bilan to'ldirishni aytadi. Bu holda men ettinchi panjara elementini qo'shdim, shunda panjara avtomatik ravishda va oltinchi element bo'sh joylarga o'tadi.

CSS Grid har doim birinchi joyda borishi kerak bo'lgan narsalarni joylashtiradi - bu holda beshinchi element, chunki u uchta ustunni o'z ichiga oladi. Keyin, agar sizda grid-avtomatik oqim mavjud bo'lsa: zich to'plam, u boshqa elementlarning panjara bo'sh joylariga mos kelishini qidiradi.

Avtomatik oqimga ega bo'lgan CSS panjarasi: zich

O'z-o'zidan grid-avtomatik oqim xususiyati sizning narsalaringizni aniqlaganingizdan so'ng yana qaysi qator yoki ustun qo'shish kerakligini o'zi belgilaydi. Satr standart hisoblanadi. Men bu uchun katta hajmli avtomatik ko'rishni ko'rmadim: zichroq.

Grid buyumlarini joylashtirish

Alohida panjara elementlarini o'lchash misolida biz dastlab beshta elementni panjara ustuniga o'rnatgan edik: 2-span, bu beshta elementni ikkita ustun bo'ylab tarqalishiga imkon berdi. Aslida, grid-ustun-grid-ustun-boshlash va grid-ustun-oxir uchun stsenariy hisoblanadi. Xuddi shu narsa panjara qatoriga ham tegishli.

Shunday qilib, texnik jihatdan biz beshinchi elementni grid-ustun-boshlash: span 2 va grid-ustun-end: avtomatik. Aslida, biz panjara beshinchi elementni tabiiy ravishda istagan joydan boshlashni aytdik, ammo uning hajmidan ikki baravar ko'p.

Qaytadan beshinchi element bilan ishlaylik va sizga Firefox Developer Edition inspektori vositalaridan foydalanib sizga ko'rsataman, shu bois beshinchi qatorda nima borligini ko'rish osonroq bo'ladi. Men yana bir nechta panjara elementlarini qo'shdim.

.
  displey: panjara;
  panjara-shablon-ustunlar: takrorlash (3, 10rem);
  panjara oralig'i: 1rem;
}
.item5 {
  panjara-ustun-boshlash: 1;
  panjara-ustunning oxiri: 3;
}

CSS Grid barcha elementlarni beshinchisimizdan oldin joylashtiradi, to'xtaydi va keyin biz boshlagan va tugagan joyimizga nazar tashlaydi va biz aytgan joyga joylashtiradi. Buning stsenariysi panjara ustuni bo'ladi: 1/3, bu bizning boshlang'ich qiymatimiz va 3 bizning yakuniy qiymatimiz.

Grid-ustun-start va grid-ustun-oxiridan foydalanib CSS-panjara

Siz shuningdek, individual panjara elementiga uning qanchalik kengligi va tugashini xohlaysizmi, aytishingiz mumkin. Men ushbu misolda panjara ustuni xususiyatidan foydalanyapman, shuning uchun men beshinchi qismni to'rtinchi qatorda tugaydigan ikkita ustunni o'z ichiga olishni aytaman.

.
  displey: panjara;
  panjara-shablon-ustunlar: takrorlash (3, 10rem);
  panjara oralig'i: 1rem;
}
.item5 {
  panjara ustuni: 2/4 oralig'i;
}
Grass-ustunli stsenariylarga ega CSS-panjara

Agar siz mahsulotingiz panjaraning butun kengligini egallashini istasangiz, lekin sizning panjaraingiz qanchalik kengligini bilmasangiz, siz panjara ustunini o'rnatishingiz mumkin: 1 / -1. Asosan, -1 qiymati sizning elementingizga oxirgi trekka o'tish kerakligini aytadi. Agar siz buni qatorlar bilan qilsangiz, mahsulotingiz panjara ostiga tushmasligi mumkin. Bu faqat sizning ravshan, pastki satrlaringiz ostiga tushadi.

Resurslar

CSS Grid-ga chuqurroq sho'ng'ish uchun tavsiya etadigan ba'zi manbalar!

  • Wes Bos's CSS Grid qo'llanmasi - bu mutlaqo bepul va men bu erda panjara haqida bilib oldim. Men uning dars berish uslubini yaxshi ko'raman!
  • CSS-ning fokuslari to'g'risida CSS-ga oid to'liq qo'llanma - bu siz Gridning biron bir jihatiga yopishib olganingizda juda ko'p aldamchi varaqlarga ega.
  • CSS Grid Garden - bu CSS Grid haqida o'rgangan narsalaringizni mashq qilishning qiziqarli usuli. Bunga urinishdan oldin dars berishni maslahat beraman, chunki u ba'zida biroz chalkashib ketadi.

CSS Grid-ga oid qo'llanmani o'qiganingiz uchun tashakkur! Qo'rqinchli 'O'zingiz haqingizda ayting' intervyu savoliga qanday javob berishim, 'Nega siz Bootcamp Grad-ni yollashingiz kerakligi yoki mening qanday qilib dasturchi bo'lganim haqidagi hikoyalarimni tekshiring.

Tvitterda texnikaga oid ko'plab tvitlar va agar rostini aytsam, itlar haqida juda ko'p tvitlarni kuzatib borishingizni unutmang.