Hvordan velge riktig grunnrutenett

I dagens video skal vi snakke om de tre rutenettsystemene som for tiden finnes i ZURBs Foundation-rammeverk. Nærmere bestemt skal vi undersøke hvilken vi skal bruke i ulike situasjoner. La oss hoppe inn!

Vi har bygget en omfattende guide for å hjelpe deg med å lære Foundation, enten du er bare i gang eller du vil utforske mer avanserte emner, sjekk ut Lær Stiftelsen.

Velge et grunnrutenett

1. Float Grid

Den første og lengste betjeningen av stiftelsens grids er flytgitteret. Som navnet antyder, bruker det flytende kolonner for å lage oppsett.

Markeringen vil trolig være kjent for deg; den bruker samme rad og kolonne struktur som finnes på andre systemer:

 
2
 
10
 
 
 
3
 
9
 

2. Flex Grid

Det andre eksemplet ble introdusert i Foundation 6 og går under navnet "Flex Grid". Den drives av CSS flexbox, og selv om den oppfører seg veldig likt det flate nettverket, har det noen unike funksjoner som vertikal og horisontal justering og automatisk liming.

Markeringen er nøyaktig den samme som flytgitteret; du definerer rader og kolonner, og ved hjelp av spesielle klasser kan du bestemme størrelsen på disse kolonnene. Men fordi dette rutenettet er basert på flexbox, har vi tilgang til noen mer avanserte evner. Autosizing er en slik funksjon; Hvis vi forlater en størrelsesklasse på en kolonne, vil den utvide for å fylle ledig plass:

 
2
 
ingen dimensjonering
 
 
 
3
 
ingen dimensjonering
 

Alternativt kan du bruke en krympe klassen vil krympe kolonnen til den minste størrelsen innholdet trenger:

 
2
 
krympe
 
 
 
3
 
krympe
 

For flere eksempler, sjekk ut skjermbildet ovenfor.

3. XY-rutenettet

Vårt tredje eksempel er det nyeste nettverket (og etter min mening den mest fantastiske); XY-nettet, introdusert i Foundation 6.4. Mens det også er drevet av flexbox, har det noen likheter med flexgitteret, men det er også noen store forskjeller.

Den første signifikante forskjellen er at XY-rutenettet kan gjøre gjenstander både horisontalt og vertikalt.

Den andre forskjellen er oppslaget. Her definerer vi et containerelement (enten med en klasse av gitter-x eller gitter-y) og fyll deretter den med celle elementer:

 
4
 
2
 
6
 

Som standard er det ingen gutter i det hele tatt, så alle celler vil sitte flush med sine omkringliggende celler. I stedet definerer vi takrennen på gitter-x element: gitter-marg-x eller gitter-padding-x (erstatter x for en y hvis vi har et vertikalt rutenett). Verdiene disse bærer kan settes ved hjelp av Sass variablene $ grid-margin-rennene og $ grid-padding-rennene henholdsvis. 

Hvilket grunnruten bør du velge?

Når du velger hvilket nett som skal brukes, bør avgjørelsen gjøres basert på noen få forhold.

1. Nettleserstøtte er viktigst, da flexbox ikke har universell støtte (IE er den tvilsomme nettleseren i dette tilfellet). Float grid er upåvirket av flexbox støtte i nettlesere.
2. For det andre trenger du vertikalt gridoppsett? I så fall må du gå til XY-nettet.
3. Til slutt, hvor viktig er kodeskrivhastighet og vedlikehold for deg? XY-nettverket bruker mye enklere syntaks enn sine forgjengere, så det vil være mye lettere å jobbe med.

For mer informasjon, sjekk ut skjermbildet ovenfor, eller ta en titt på de siste kursene mine!

• Bli kjent med Foundation XY Grid Tuts + Course
• Avansert Foundation: Bruke ZURB Stack Tuts + Course
• Komme i gang med Foundation Building Blocks Tuts + Course