Hur man väljer rätt Foundation Grid

I dagens video kommer vi att prata om de tre nätsystemen som för närvarande finns i ZURBs Foundation-ramverk. Mer specifikt ska vi undersöka vilken som vi ska använda i olika situationer. Låt oss hoppa in!

Vi har byggt en omfattande guide för att hjälpa dig att lära dig Foundation, oavsett om du bara har börjat eller om du vill utforska mer avancerade ämnen, kolla in Lär dig grunden.

Välja ett grundnät

1. Float Grid

Den första och längsta betjäningen av stiftelsens grids är float grid. Som namnet antyder använder den flytande kolumner för att skapa layouter.

Markeringen kommer troligen att vara bekant för dig; Den använder samma rad och kolumnstruktur som finns på andra system:

 
2
 
10
 
 
 
3
 
9
 

2. Flex Grid

Det andra exemplet introducerades i Stiftelse 6 och heter "Flex Grid". Den drivs av CSS flexbox, och även om den beter sig väldigt lik den platta rutan har den några unika egenskaper som vertikal och horisontell anpassning och automatisk limning.

Markeringen är exakt densamma som flottörnätet; du definierar rader och kolumner, och med specialklasser kan du bestämma storleken på dessa kolumner. Men eftersom detta nät är baserat på flexbox har vi tillgång till några mer avancerade funktioner. Autosizing är en sådan funktion; Om vi ​​lämnar ut en storleksklass på en kolumn kommer den att expandera för att fylla tillgängligt utrymme:

 
2
 
ingen storlek
 
 
 
3
 
ingen storlek
 

Alternativt, med användning av a krympa klassen kommer att krympa kolumnen till den minsta storleken som dess innehåll behöver:

 
2
 
krympa
 
 
 
3
 
krympa
 

För fler exempel, kolla in skärmbilden ovan.

3. XY-nätet

Vårt tredje exempel är det senaste gallret (och enligt min mening den mest fantastiska); XY Grid, introducerad i Foundation 6.4. Även om den drivs med flexbox har den vissa likheter med flexnätet, men det finns också några stora skillnader.

Den första signifikanta skillnaden är att XY-rutnätet kan göra objekt både horisontellt och vertikalt.

Den andra skillnaden är markeringen. Här definierar vi ett behållarelement (antingen med en klass av grid-x eller grid-y) och fyll sedan i det med cell element:

 
4
 
2
 
6
 

Som vanligt finns det ingen gutter alls, så alla celler kommer att sätta ihop med sina omgivande celler. I stället definierar vi rännan på grid-x element: grid-marginal-x eller grid-padding-x (ersätter x för en y om vi har att göra med ett vertikalt rutnät). De värden som dessa bär kan sättas med Sass-variablerna $ grid-marginal-rännor och $ grid-padding-rännor respektive. 

Vilket stiftelsesnät borde du välja??

Vid val av vilket nät att använda ska beslutet fattas baserat på några faktorer.

1. Browser support är det viktigaste, eftersom flexbox inte har universellt stöd (IE är den tvivelaktiga webbläsaren i det här fallet). Float-nätet påverkas inte av flexbox-stöd i webbläsare.
2. För det andra behöver du vertikala rutnätlayout? Om så är fallet måste du gå till XY-rutnätet.
3. Slutligen, hur viktigt är kodskrivningshastighet och underhåll för dig? XY-nätet använder mycket enklare syntax än sina föregångare, så det blir mycket lättare att arbeta med.

För mer information, kolla in skärmbilden ovan, eller kolla på mina senaste kurser!

• Lär känna Foundation XY Grid Tuts + Course
• Advanced Foundation: Använda ZURB Stack Tuts + Course
• Komma igång med Foundation Building Blocks Tuts + Course