Otprilike svako putovanje razvojnog programera započinje osnovnim HTML, CSS, JavaScript putem. Započnete sa strukturom, učinite da izgleda pristojno, a zatim je natjerate da nešto učini. Međutim, negdje na putu lako je uhvatiti se u svijet CSS okvira i utabati neke sitnije detalje.
Bootstrap dolazi s lijepom lijepom rešetkom, koristeći samo nekoliko klasa i CDN-om, kako bi stvorio tu lijepu prilično mobilnu mrežu koja reagira. I prije nego što to shvatite, počnete posezati za tim okvirom kad god napravite projekt koji treba raspored mreže. Često sam radio isto, to jest dok nisam započeo "Getting 'Griddy With It".
Ono što me poslalo niz put učenja CSS Grid-a bilo je kad sam pokušavao izgraditi web mjesto pomoću Semantičkog korisničkog sučelja React (ljepši i manje neodređeni Bootstrap.) Međutim, kada sam gradio mrežu, nisam uspio natjerati dva stupca u isto mjesto međusobno, a na kraju su se zajebavali sa svim marginama i podmetačima pod suncem, da bi nadjačali stilove koje je okvir ugradio. Bilo je frustrirajuće iskustvo i proveo sam više vremena petljajući se u pravila specifičnosti nego u stvarnosti kodiranja.
Tu dolazi CSS Grid. CSS Grid je relativno nov dodatak CSS3, a dječak je to doozy. Moranje na uvezeni mrežni okvir dovodi do nekoliko problema:
- Povećana veličina datoteka. Što više uvozite, aplikacija postaje veća. U trenutku kada je ključna brzina, smanjenje veličine datoteke aplikacije nevjerojatno je važna ideja koju treba razmotriti. Umjesto da uvozite okvir ili se oslanjate na spor CDN, možete izraditi vlastiti.
- Manje čitljiv kod. Oni od vas koji su koristili okvir znaju sve složenija i neodređenija imena klasa koja dolaze uz njega. Tko odmah ne prepozna ono što
class="col-6 col-md-4 col-sm-12"stoji? Ili tko želi završiti pisanjemdiv.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteenu svom CSS-u? - Manje prilagodbe. Ugrađena pravila okvira može biti teško nadjačati. Možete završiti s dugim imenima klasa da biste došli do ispravne specifičnosti ili završiti s redom nakon retka
!importantoznaka za stvaranje prilagođenih stilova koji nadjačavaju okvir. Magija CSS Grid-a je u tome što možete sami izraditi i prilagoditi ga svojim potrebama, umjesto da se oslanjate na druge koji nisu imali na umu specifičnosti vašeg projekta.
Responzivna CSS mreža
CSS Grid u osnovi je skupina okvira koje možete smjestiti na stranicu. Možete upotrijebiti brojčane jedinice za uvećavanje okvira ili relativne veličine kako biste ih učinili osjetljivijima. Uz ogromnu raznolikost veličina zaslona, ovo je veliki plus. Recimo da želite stvoriti izgled od šest div-ova i želite da reagiraju s više stupaca za različite veličine zaslona.
Ovako izgleda neformatirano kao šest divsu spremniku.
Umjesto da morate dodavati klase za svaku od točaka prekida, možete postaviti minimalnu veličinu div-a u mrežu, a zatim automatski ispuniti veće odzivne okvire pomoću frsvojstva veličine. Morate dodati svojstva CSS mreže za roditelja, a zatim će se small-boxdiv-ovi automatski popuniti.
CSS za spremnik je kao u nastavku:
Kao što vidite, možete stvoriti jednostavnu reaktivnu mrežu iz samo četiri retka koda. Ne može biti jednostavnije, a sav se vaš sadržaj može slobodno kretati i premještati po potrebi. U ovom slučaju nisu potrebni niti medijski upiti. Odavde možete slobodno prilagoditi pojedinačne okvire u mreži. Prilično je fleksibilan za prilagodljive izglede i veličine. Poigrajte se s tim i gledajte kutije kako se magično pomiču.
Mrežna područja
Drugi razlog zbog kojeg bih težio posegnuti za okvirnom mrežom bio je korištenje za različite izglede na različitim uređajima. Možda ćete htjeti da se komponente kreću, ovisno o veličini zaslona na kojem se nalazite.
Ispod je primjer rasporeda web mjesta koji biste mogli poželjeti na stolnim računalima i tabletima. Promijeniti ovo vrlo je jednostavno. Iako se nekima ne sviđa struktura, vi i koristite ASCII strukturu predloške za područja mreže.
Recimo da imate osnovni izgled stranice koji ima zaglavlje, bočne trake, sadržaj i podnožje.
Izgled stranice bez formatiranja izgledao bi ovako s osnovnom mrežom od tri stupca postavljena na 1fr 4fr 1fr. Kutije će se ispuniti kako bi odgovarale dodijeljenom prostoru unutar mreže. Međutim, ako želite da izgled stranice bude fluidniji i dinamičniji kao u nastavku, možete koristiti template-areas.
Da biste dobili ovaj željeni izgled, morate stvoriti područja predloška. Možete ga zamisliti kao minijaturnu ASCII kartu koja pokazuje kamo želite da okviri idu na stranici.
Da biste dobili raspored radne površine, napravite svoju minijaturnu kartu kao u grid-template-areasposjedu. Svaki redak sadrži red i nazive za odgovarajuće stupce za izgled. Možete vidjeti da će se odjeljci zaglavlja i podnožja protezati duž cijelih stupaca u koje su postavljeni. Također se bočne trake i sadržaj protežu u više redaka, kao što možete vidjeti u području "karte". To se zatim može pretvoriti u bilo koji izgled koji vam je potreban dodavanjem grid-areasvojstva u odgovarajuće div-ove kao na krajnjoj desnoj slici. Možete im dati bilo što što odgovara vašem projektu.
Da biste mogli funkcionirati na prikazu tableta, jednostavno trebate poslati medijski upit i prebaciti se po redoslijedu u predlošcima. Jednostavno se krećite po sadržaju za željeni prikaz. (Imajte na umu da to može dovesti do problema na čitačima zaslona ako sadržaj nije u redu, stoga budite sigurni da sadržaj i dalje čita logično.)
Zaključak
Ovaj jednostavan post definitivno samo ogrebe površinu onoga što možete učiniti s CSS Gridom. Ali mislim da je glavno što treba oduzeti ovome da se ne biste trebali bojati upotrebe CSS Grid-a. Doista je prilično jednostavan, moćan i lagan kad se naviknete na novu sintaksu. Samo naprijed i uživajte u "Getting 'Griddy With It."
Za više informacija o CSS Grid toplo preporučujem provjeru //cssgrid.io podučavao Wes Bos. To je fantastičan tutorial CSS Grid.
Kao što imate pitanja, svakako posjetite web mjesto CSS trikova na //css-tricks.com/snippets/css/complete-guide-grid/ kako biste saznali više o mreži.
Da biste provjerili više mog rada, posjetite //theran.co i saznajte više o meni.