Gettin 'Griddy With It: ustvarite svojo CSS Grid in spustite okvire

Skoraj vsako potovanje razvijalca se začne z osnovno potjo HTML, CSS in JavaScript. Začnete s strukturo, naredite jo spodobno in nato naredite nekaj. Vendar pa je nekje med potovanjem enostavno ujeti se v svet okvirov CSS in pobrskati nad drobnejšimi podrobnostmi.

Bootstrap je opremljen s svojo lepo lepo mrežo, ki uporablja le nekaj razredov in CDN, da ustvari to lepo mobilno odzivno mrežo. In preden se zaveš, začneš posegati po tem okviru, kadar koli zgradiš projekt, ki potrebuje mrežno postavitev. Pogosto sem počel enako, torej dokler nisem začel »Gettin 'Griddy With It«.

Tisto, kar me je spustilo po poti učenja CSS Grid, je bilo, ko sem poskušal zgraditi spletno mesto z uporabo Semantičnega uporabniškega vmesnika React (lepši in manj nejasen Bootstrap.) Vendar pri gradnji mreže nisem mogel narediti dveh stolpcev poravnanih med seboj in se na koncu zmešali z vsakim robom in pravilom oblazinjenja pod soncem, da bi preglasili sloge, ki jih je vgradil okvir. Bila je frustrirajoča izkušnja in več časa sem se zapletel v pravila specifičnosti kot v resnici v kodiranje.

Tu nastopi CSS Grid. CSS Grid je razmeroma nov dodatek CSS3, fant pa je doozy. Če se odpravite na uvoženi mrežni okvir, pride do nekaj vprašanj:

  1. Povečana velikost datotek. Več kot uvozite, večja postane vaša aplikacija. V trenutku, ko je hitrost ključnega pomena, je zmanjšanje velikosti datoteke aplikacije izjemno pomembna ideja, ki jo je treba upoštevati. Namesto da uvozite ogrodje ali se zanašate na počasen CDN, lahko zgradite svojega.
  2. Manj berljiva koda. Tisti, ki ste uporabili ogrodje, poznate vedno bolj zapletena in nejasna imena razredov, ki so zraven. Kdo ne prepozna takoj, kaj class="col-6 col-md-4 col-sm-12"pomeni? Ali kdo želi na koncu pisati div.ui.segment.inverted.stackable.desktop.twelve.mobile.sixteenv svoj CSS?
  3. Manj prilagajanja. Vgrajena pravila ogrodja je težko preglasiti. Na koncu lahko dobite dolga imena razredov, da pridete do pravilne podrobnosti, ali pa vrstice za vrsticami !importantoznak, da ustvarite sloge po meri, ki preglasijo ogrodje. Čarobnost CSS Grid je v tem, da si lahko ustvarite svoje in ga prilagodite svojim potrebam, namesto da se zanašate na druge, ki niso imeli v mislih posebnosti vašega projekta.

Odzivna mreža CSS

CSS Grid je v bistvu skupina polj, ki jih lahko namestite na stran. Za povečavo polj lahko uporabite enote številk ali pa relativne velikosti, da je odzivnost bolj odzivna. Zaradi velike raznolikosti velikosti zaslona je to velik plus. Recimo, da želite ustvariti postavitev šestih div-jev in želite, da se odzivajo z več stolpci za različne velikosti zaslona.

Takole izgleda neoblikovano kot šest divsv posodi.

Namesto da bi morali dodati razrede za vsako točko preloma, lahko v mreži nastavite najmanjšo velikost divja in nato samodejno izpolnite z večjimi odzivnimi polji z uporabo frlastnosti velikosti. Dodati morate samo lastnosti mreže CSS za nadrejenega, nato pa se small-boxbodo divji samodejno izpolnili.

CSS za vsebnik je spodaj:

Kot lahko vidite, lahko iz samo štirih vrstic kode ustvarite preprosto odzivno mrežo. Ne more biti lažje in vsa vaša vsebina se lahko po potrebi premika in premeša. V tem primeru sploh niso potrebne nobene medijske poizvedbe. Od tu lahko prilagodite posamezna polja v mreži. Je dokaj prilagodljiv za odzivne postavitve in velikosti. Poigrajte se z njim in opazujte, kako se škatlice magično premikajo.

Mrežna območja

Drugi razlog, zaradi katerega bi rad posegel po okvirni mreži, je bila uporaba za različne postavitve na različnih napravah. Morda boste želeli, da se komponente premikajo, odvisno od velikosti zaslona, ​​na katerem ste.

Spodaj je primer postavitev spletnih mest, ki jih boste morda želeli na namizju in tabličnem računalniku. Spreminjanje tega je povsem preprosto. Čeprav nekaterim struktura ni všeč, za omrežja uporabljate ASCII-strukturo predloge.

Recimo, da imate osnovno postavitev strani, ki ima glavo, stranske vrstice, vsebino in nogo.

Postavitev strani brez formatiranja bi izgledala takole z osnovno mrežo treh stolpcev, nastavljeno na 1fr 4fr 1fr. Polja se izpolnijo tako, da ustrezajo njihovemu dodeljenemu prostoru znotraj mreže. Če pa želite, da je postavitev strani bolj tekoča in dinamična, kot spodaj, lahko uporabite template-areas.

Če želite dobiti to želeno postavitev, morate ustvariti področja predlog. Lahko si ga predstavljate kot miniaturni zemljevid ASCII, ki prikazuje, kam želite, da gredo polja na strani.

Če želite dobiti postavitev namizja, naredite svoj miniaturni zemljevid, kot je v grid-template-areasnepremičnini. Vsaka vrstica vsebuje vrstico in imena ustreznih stolpcev za postavitev. Vidite lahko, da se razdelki glave in noge raztezajo vzdolž celotnih stolpcev, v katere so nameščeni. Tudi stranske vrstice in vsebina se raztezajo v več vrstic, kot lahko vidite na območju "zemljevid". To lahko nato spremenite v katero koli postavitev, ki jo potrebujete, tako da dodate grid-arealastnost v ustrezne div-je, kot na skrajni desni sliki. Lahko jih poimenujete kar koli, kar ustreza vašemu projektu.

Če želite, da deluje v pogledu tabličnega računalnika, morate preprosto narediti predstavnostno poizvedbo in preklopiti po vrstnem redu na področjih predloge. Preprosto se premikajte po vsebini za želeni pogled. (Upoštevajte, da lahko to povzroči težave z bralniki zaslona, ​​če imate vsebino nepravilno urejeno, zato se prepričajte, da se vsebina še vedno bere logično.)

Zaključek

Ta preprosta objava vsekakor samo opraska površino tega, kar lahko počnete s CSS Grid. Ampak mislim, da je glavno, kar je treba odvzeti temu, to, da se ne smete bati uporabe mreže CSS. Res je zelo preprost, zmogljiv in lahek, ko se navadiš na novo skladnjo. Pojdi naprej in uživaj v "Getting 'Griddy With It."

Za več informacij o CSS Grid toplo priporočam, da preverite //cssgrid.io, ki ga je poučeval Wes Bos. To je fantastična vadnica CSS Grid.

Ker imate vprašanja, obiščite spletno mesto CSS Tricks na //css-tricks.com/snippets/css/complete-guide-grid/, če želite izvedeti več o mreži.

Če želite preveriti več svojega dela, obiščite //theran.co in izveste več o meni.