Tarkib
- 01. Belgilanishni o'rnating
- 02. Asosiy uslublarni yozing
- 03. Tarmoqni sozlang
- 04. Katta brauzer mosligini sozlang
- 05. Shaxsiy buyumlarni uslubi
- 06. Gridga narsalarni joylashtiring
- Eski brauzerlar haqida tezkor ma'lumot
CSS Grid Layout har kuni brauzer tomonidan qo'llab-quvvatlanmoqda va biz CSS Grid-ni ishlab chiqarishga jo'natishimiz mumkin. CSS Grid-ning tezkor qabul qilinishi haqiqatan ham ajoyib bo'ldi.
CSS Grid bilan javob beradigan portfel saytlari maketini yaratishga kirishishdan oldin, ikkita narsani aniqlab olaylik: CSS Grid Flexbox o'rnini bosmaydi. Bu hatto suzib yuruvchilarning o'rnini bosmaydi. Darhaqiqat, biz Flexbox-dan CSS Grid-ni yaxshiroq qiladigan ishlarni bajarish uchun foydalanganimizni tushunishingiz mumkin. Ammo almashtirishni o'ylash o'rniga, kombinatsiya nuqtai nazaridan o'ylashimiz mumkin.
- 15 haqiqatan ham foydali veb-dizaynga oid qo'llanmalar
Bir yong'oq moyi va jele sendvichini tasavvur qiling. Yong'oq moyi va jele o'z-o'zidan juda yaxshi, ammo ular birlashganda yangi narsa tug'iladi va sehr paydo bo'ladi.
Bizning veb-saytni joylashtirish vositalari shunga o'xshashdir. Ular o'zlari bajaradigan ishlarda juda zo'r, ammo ular birlashtirilganda sehr paydo bo'ladi va biz yangi va qiziqarli tartiblarni yaratishimiz mumkin. Ushbu misolda biz CSS Grid va Flexbox yordamida o'zimizga xos PB&J veb-ishlab chiqishni amalga oshiramiz. Jarayoningizni yanada soddalashtirmoqchimisiz? Yaxshi veb-sayt ishlab chiqaruvchisini tanlang.
01. Belgilanishni o'rnating
Ushbu qo'llanmada biz javob beradigan portfel tartibini yaratish uchun CSS Grid va Flexbox-dan birgalikda foydalanamiz. Ushbu qutilarning har biri har xil o'lchamda, ba'zilari qatorlar bo'ylab joylashgan va har bir quti pastki qismida joylashgan sarlavhaga ega. Buni amalga oshirish uchun biz Flexbox bilan birga keltirilgan ba'zi ajoyib moslashtirish vositalaridan foydalanamiz.
Belgilanishni o'rnatish bilan boshlaymiz.
ul class = ”box”> li> div class = ”box__text-wrapper”> h2> Case Study Title / h2> p> Bizning amaliy tadqiqimiz uchun aniq tavsif. Biz qattiq ishladik. / P> / div> / li> / ul>
Biz ushbu ro'yxat elementini va undagi barcha narsalarni olti marta takrorlaymiz, shunda bizda o'ynash uchun narsalar mavjud. Agar sizni qiziqtirayotgan bo'lsa, biz foydalanishga qaror qildik ul element bu erda, chunki bu yozuvlar ro'yxati. O'zingizga to'g'ri keladigan narsadan bemalol foydalaning.
Ro'yxat elementining ichida bizda a div sinf bilan .boxes__text-wrapper unda ishning sarlavhasi va unga qo'shib berilgan tavsif mavjud.
02. Asosiy uslublarni yozing
Endi ishlash uchun ba'zi bir asosiy uslublarni o'rnatamiz.
body {font-family: Avenir, sans-serif; margin: 2rem auto; kengligi: 95%; } h2, p {margin: 0; } ul {ro'yxat uslubi: yo'q; to'ldirish: 0; margin: 0; } .boxes> * {padding: .5rem; orqa rang: # 333; rang: oq; }
Biz shriftni Avenir deb o'zgartirdik. Sarlavha va xatboshilardan marginni olib tashlaymiz va tartiblanmagan ro'yxatni tiklaymiz. Shuningdek, biz har bir ro'yxat elementiga har birining qaerdaligini ko'rishga yordam beradigan bir nechta standart uslublarni beramiz.
03. Tarmoqni sozlang
Biz avval mobil telefonlar uchun o'z maketimizni yaratmoqchimiz. Bizning tarmoqni kichik ekranlarga o'rnatish bu kabi oson:
.boxes {display: grid; grid-avtomatik qatorlar: minmax (125px, avtomatik); panjara oralig'i: .5rem; }
Grid narsalarimizni bir-birining ustiga qo'yadi, chunki sukut bo'yicha bitta ustun mavjud. Biz har bir amaliy ish o'rtasida bir oz bo'sh joy yaratamiz panjara oralig'i - bu bizga qatorlar va ustunlar orasidagi olukni qo'shishga imkon beradi.
Faqat murakkab bo'lishi uchun ustunlarga chekka qo'shishni unuting n-bola selektorlar; oluklar faqat ustunlar yoki qatorlar orasida paydo bo'ladi, hech qachon ustundan keyin yoki oldin qator.grid-gap stenografiyasipanjara-ustun oralig'i va qator-oraliq. Odatda biz uzun qo'lni ishlatardik, lekin biz ikkalasini ham yozib olamiz, chunki brauzer o'sib boradi, shuning uchun biz stenografiyadan foydalanamiz.
Keyin biz foydalanamiz panjara-avtomatik qatorlar panjara konteynerimizga yangi qatorlarning balandligini aytib berish. Grid bizning barcha tarkibimizni joylashtirish uchun yangi qatorlarni yaratadi. Ushbu avtomatik ravishda yaratilgan qatorlarning hajmini. Bilan boshqarishimiz mumkin panjara-avtomatik qatorlar mulk. Biz uchun mavjud bo'lgan yangi funktsiyadan foydalanmoqdamiz: minmax (). Bilan minmax () biz minimal o'lcham va maksimal hajmni belgilashimiz mumkin.
Bizning kodimiz bilan biz qatorlarimiz minimal 120px va maksimal avtomatik bo'lishini xohlaymiz deymiz. Biz bu erda avtoulovdan foydalanmoqdamiz, chunki tarkib talab qiladigan bo'lsa, bizning qatorlarimiz o'sishini xohlaymiz.
04. Katta brauzer mosligini sozlang
Bizning sahifamizni shunday o'rnatamiz, shunda bizning brauzerimiz 40em yoki undan kattaroq bo'lganda, bizning grid konteynerimizda har biri bitta fraktsiyadan iborat oltita ustun bor.
@media ekrani va (min-width: 40em) {.boxes {panjara-shablon-ustunlar: takrorlash (6, 1fr); panjara oralig'i: 2px; }}
panjara-shablon-ustunlar bizning ustunimizga qancha ustun bo'lishi kerakligini aytib berish uchun foydalanadigan xususiyatdir. Biz biladigan va sevadigan barcha uzunlik birliklarini qabul qiladi rem, em, px, foizlar,vw, vh va fr.
The fr biz CSS Grid Layout yordamida oladigan yangi birlik. Shu bilan biz brauzerga bizning o'rniga matematikani bajarishni ayta olamiz - juda yaxshi.
Brauzerga bitta kasrning oltita ustunini yaratishni buyurib, brauzer bizning panjara konteynerimizning kengligini hisoblab chiqadi va uni oltita teng ustunga ajratadi. Bundan tashqari, Grid aqlli bo'lgani uchun, u biz ko'rsatgan ariqni hisoblab chiqqandan keyingina bo'shliqni ajratadi.
05. Shaxsiy buyumlarni uslubi
Bizning amaliy tadqiqotlarimiz shunchaki kulrang qutilarga o'xshab ko'rinadi. Keling, fon rasmini qo'shib, sarlavhalarimizni ushbu qutilarning pastki qismida ko'rsatsin va gradientni qo'shib qo'ying, shunda sarlavhamiz ajralib turadi.
.boxes li {background-image: lineer-gradient (rgba (0,0,0,0), rgba (0,0,0,0.8)), url (path / to / image); fon hajmi: qopqoq; displey: egiluvchanlik; align-items: moslashuvchan uchi; }
Ushbu fon rasmi Unsplash-dan bepul rasm edi, lekin xohlagan rasmingizdan foydalaning. Matnni qutilarimizning pastki qismiga tekislash uchun men Flexbox-ni aralashma tarkibiga kiritaman. Siz buni hali ko'rmaysiz, ammo har bir turli xil qutilarni joylashtirganimizda, siz oxir-oqibat uning ishlashini ko'rasiz.
06. Gridga narsalarni joylashtiring
Afsuski, Gridda biz dastlab ko'rgan narsalarni avtomatik ravishda panjara tartibiga joylashtirishning imkoni yo'q. Ammo, bizning baxtimizga, Grid buni qo'lda juda oson bajaradigan vositalarni beradi. Ushbu qo'llanmada biz har bir ro'yxat elementlarini joylashtirish uchun nth-child-dan foydalanamiz. Ishlab chiqarish veb-saytida, biz to'g'ri rejalashtirishni hisobga olgan holda, tarkibni og'ir saytga o'xshash tartiblarni avtomatlashtirishga imkon beradigan sinfdan foydalanishni maslahat beramiz.
Birinchi elementimiz bilan boshlaylik.
@media ekrani va (min-width: 40em) {.boxes li: nth-child (1) {grid-column: 1 / -1; panjara qatori: 3 oralig'i; }}
Biz barcha joylashtirish uslublarimizni ilgari yozgan media-so'rovimiz ichiga joylashtiramiz, chunki biz ushbu tartib bizning brauzerimiz 40em yoki undan katta bo'lganidan keyin amalga oshishini xohlaymiz. Bilan n-bola biz birinchi ro'yxat elementini nishonga olamiz. CSS Grid bizga buyumlarimizni panjara ustunli va qatorli qatorlar bilan osongina joylashtirishimizga imkon beradi. Ob'ektlar qaerda bo'lishi kerakligini belgilashning turli xil usullari mavjud, ammo biz bu erda elementimiz birinchi ustun satridan boshlanishini va butun konteynerni -1 bilan qamrab olishini aytamiz.
Keyin, panjara qatori bilan biz buyumga uchta qatorni aytamiz. Uch qator biz xohlagan o'lchamda bo'lishini qaerdan bilamiz? Xo'sh, biz ushbu qatorlarning o'lchamlarini bir necha lahzadan oldin grid-auto-qatorlar bilan aniqladik va agar ular bizdan mamnun bo'lmasa, biz minimal o'lchamlarni o'zgartirishimiz mumkin.
Qolgan narsalarimizni joylashtiramiz.
@media ekrani va (min-width: 40em) {.boxes li: nth-child (2) {grid-column: span 2; panjara qatori: oraliq 7; } .boxes li: nth-child (3) {grid-column: span 4; panjara qatori: oraliq 3; } .boxes li: nth-child (4) {grid-column: span 2; panjara qatori: oraliq 4; } .boxes li: nth-child (5), .boxes li: nth-child (6) {grid-column: span 2; panjara qatori: oraliq 2; }}
Grid Layout bizni qanchalik nazorat qilishini ajablantirmaydi? Faqat bir nechta kod satrlari bilan biz to'liq javob beradigan tartibni to'plashimiz mumkin, agar boshqa narsalar qo'shilsa buzilmaydi.
Albatta, ular biroz g'alati ko'rinishi mumkin, chunki ular sukut bo'yicha faqat bitta katak ustun va qatorni egallaydi, ammo bu bizning tartibimizni buzmaydi. Agar biz buni suzuvchi va aniqlangan kenglik va balandliklar bilan qilsak, ko'proq tarkib qo'shilishi kerak edi.
Eski brauzerlar haqida tezkor ma'lumot
OK, xonada filga murojaat qilish vaqti keldi. "Qadimgi brauzerlar haqida nima deyish mumkin?" Bu savolga javob CSS-dagi har qanday yangi xususiyat uchun bir xil: funktsiya so'rovlaridan foydalaning va kaskadni qabul qiling. Xususiyatlar bo'yicha so'rovlar juda yaxshi qo'llab-quvvatlanadi va ular bo'lmagan joyda biz o'zimizning kamchiliklarimizni birinchi o'ringa qo'yamiz. Masalan, biz quyidagi satrlar bo'yicha biror narsa yozgan bo'lar edik:
.Sizning tanlovchingiz {display: flex; } / * Sizning Grid kodingiz * / @supports (display: grid) {display: grid; panjara-shablon-ustunlar: takrorlash (3, 1fr); panjara oralig'i: 1rem 2rem; }
Bizning kodimizni shu tarzda yozish shuni anglatadiki, agar brauzer Grid Layout-ni tushunsa, u Flexbox o'rniga foydalanadi. Bundan tashqari, biz kaskadni qabul qilayotganimiz sababli, xususiyatlar haqidagi so'rovlarni tushunmaydigan brauzerlar ularni e'tiborsiz qoldiradilar va kerakli ma'lumotlarga ega bo'ladilar. Biz o'z uslublarimizni odatdagidan biroz ko'proq yozishni rejalashtirishimiz kerak bo'lishi mumkin, ammo buni amalga oshirish orqali oqilona kamchiliklar bilan ajoyib ko'rinishdagi maketlarni yaratishimiz mumkin. Agar siz eski sahifalaringizni saqlamoqchi bo'lsangiz, ularni PDF formatida eksport qiling va ularni bulutli xotirada saqlang.
Bundan tashqari, vaqt o'tishi bilan CSS Grid-ni yanada ko'proq qo'llab-quvvatlash bo'ladi. Keyinchalik, kamchiliklarimizni o'chirib tashlaganimiz va Grid bilan bog'liq barcha CSS-larimizni tark etganimiz naqadar ajoyib bo'lishini o'ylab ko'ring. Grid haqida ko'proq ma'lumotga ega bo'lganingizda, u hozirda biz bajaradigan ko'p narsalarni CSS-ning kamroq qatorlari bilan amalga oshirayotganini tushunasiz. Esingizda bo'lsa, agar sizda juda murakkab sayt mavjud bo'lsa, veb-hosting xizmatingiz nolga qadar bo'lishi kerak.
Ushbu maqola dastlab paydo bo'lgan net jurnal, ishlab chiquvchilar va veb-dizaynerlar uchun dunyodagi etakchi jurnal. Bu erga obuna bo'ling.
