CSS Grid är en alltmer populär metod för att skapa komplexa responsiva webbdesign layouter som ger mer konsekvent över webbläsare. Nu är det dags att bekanta dig med CSS Grid, så vi har samlat 13 av de bästa sätten att börja lära oss idag.
CSS Grid gör det möjligt att skapa fler asymmetriska layouter och mer standardiserad kod som är kompatibel med webbläsare, i stället för gamla skolmetoder som tabeller eller boxmodell. De flesta stora webbläsare stöder redan CSS Grid och det är en W3C Candidate Recommendation, som skulle formalisera det som en vanlig praxis. Det är allmänt trott att CSS Grid kommer att bli framtiden för webbsidor.
1. MDN: CSS Grid Layout
Mozilla har stora resurser i guiden för MDN Web Docs, vilket visar enkel förklaring av hur saker och ting fungerar och kod exempel för att komma igång.
Så här säger MDN om CSS-nätet:
CSS Grid Layout utmärker sig vid att dela en sida i större regioner, eller definiera förhållandet när det gäller storlek, position och lager, mellan delar av en kontroll byggd från HTML-primitiver.
Gilla layouter gör det möjligt för en författare att precisera element i kolumner och rader. Men många fler layouter är antingen möjliga eller enklare med CSS-rutnät än de var med bord. En gridbehållares barnelement kan till exempel positionera sig så att de faktiskt överlappar varandra och skikt, som liknar CSS-positionerade element.
Dokumentationen erbjuder kod och exempel plus element som du kan öppna och spela med på egen hand i CodePen eller JSFiddle. Detta kan vara den bästa utgångspunkten när det gäller att tänka på CSS-nätet.
2. Lär CSS-nätet
Lär CSS Grid är en guide till att lära sig tekniken från Jonathan Suh, baserat på den metod där han lärde sig det. Guiden är välorganiserad och börjar med en innehållsförteckning som låter dig hoppa från avsnitt till avsnitt.
Den här guiden är lätt att följa - en viss kodningskunskap krävs - och är en bra resurs för CSS-nybörjare. Varje element kommer med ett visuellt exempel, vilket kan vara nyckeln till att föra all information tillsammans.
3. Tuts + Guide till CSS-rutor
Tuts + har byggt en komplett guide som hjälper dig att lära dig CSS Grid, oavsett om du bara har börjat med grunderna eller vill utforska mer avancerad CSS. Det görs genom en serie tydliga och grundliga handledning, med praktiska exempel hela tiden.
4. Codeacademy: Introduktion till Grids
Codeacademy har länge varit en av de bästa platserna att lära sig kodningsförmåga i ett praktiskt format. Medan du måste skapa ett konto för att få tillgång till handledning, är det ett bra sätt att lära sig med hjälp av ett lektionsplanbaserat format.
Här beskrivs introduktionen till Grids kurs:
I den här lektionen introducerar vi ett nytt kraftfullt verktyg som heter CSS-nätet. Nätet kan användas för att lägga ut hela webbsidor. Flexbox är mest användbart för positionering av objekt i en endimensionell layout. CSS-nätet är mest användbart för tvådimensionella layouter, vilket ger många verktyg för att anpassa och flytta element över både rader och kolumner.
Codeacademy kurs kan tas i följd - börja i början om du är helt ny för att stödja webbdesign - eller ensam. Det är gratis att skapa ett konto och ta många av kurserna.
5. FreeCodeCamp: Lär CSS-nätet på 5 minuter
Få vad CSS-nätet handlar om och bara ha några minuter att verkligen dyka in i det? Denna snabbstartstudie från FreeCodeCamp hjälper dig att bekanta dig med det på bara fem minuter. (Beviljas du behöver veta några grunder redan.)
Här är takeaway:? De två kärningredienserna i ett CSS-galler är förpackningen (föräldern) och objekten (barnen). Omslaget är själva rutnätet och objekten är innehållet inne i rutnätet.?
5-minutersguiden innehåller också relevant uppmärkning.
6. CSS Layout Workshop
CSS Layout Workshop är en uppsättning betalda kurser från Rachel Andrew, en av ledarna inom CSS-rutnätverk. Kurserna är ett online-självstudieringsprogram som är idealiskt för att du gillar mer struktur för att lära dig något nytt.
För att se om kursen är rätt för dig är den första delen gratis. Det fokuserar på CSS-basics och förklarar alla grunderna du behöver för att gå djupare in i materialet. Det fina med det kompletta uppsättningen kurser är att det inte finns några extra kostnader. du behöver bara en webbläsare och textredigerare för att komma igång.
7. Spel: Grid Garden
Grid Garden är ett spel som använder CSS för att växa en framgångsrik morotträdgård. Det är en bra grund för hur CSS-egenskaper fungerar för att få dig i rätt inställning för att tänka på CSS-nätet.
Och det är mycket roligt. Se om du kan göra det genom alla 28 nivåer.
8. Grid enligt exempel
Rutnät enligt exempel visar hur olika CSS-rutkonfigurationer kommer att se i stödjande webbläsare. Varje nätkonfiguration innehåller ett visuellt exempel med länkar till sidor med mer information om tekniken och koden.
Det är också en rolig bonus med dummy-sidlayouter så att du kan se hur olika CSS-gridexemplar ser ut med riktigt innehåll som tillämpas på dem.
9. Video: Läs CSS-nätet
Om du lär dig genom att se någon gör något mer upp i din gränd, kolla Lär dig CSS Grid-videon. (Den har också åtföljande text.)
18-minuters video är en snabbare starthandledning som tillverkaren hoppas kommer att göra? Underlätta din iver att utforska CSS-nätets fulla potential.?
Videon tar dig igenom ett projekt, definierar HTML, definierar vissa grundläggande regler, definierar grids, nestar CSS-rutnätet och mallområdena och några svåra svar. Videon och texten innehåller skärmdumpar av all uppmärkning.
10. CSS-tricks: En komplett guide till rutnätet
CSS-Tricks har länge varit en av de bästa platserna att lära sig om kodning. Komplett guide till rutnätet är inget undantag.Guiden, som publicerades i november 2017, är en aktuell primer på 2D-systemet.
Denna guide är fantastisk och bruten i smältbara sektioner.
Men det bästa kan vara galleriet av CSS-nätet i aktion. Se till att du spenderar lite tid i galleriet för inspiration.
11. CSS Grid Fråga mig någonting
Har du frågor om CSS-nätet? Fråga en expert.
Denna Git innehåller enkla frågor och svar från Rachel Andrew. Medan hon bara svarar på reducerade frågor är det fortfarande ganska användbart. Var noga med att följa grundreglerna.
12. Video: Progressing Our Layouts
Jen Simmons delar sitt tal från 2016 Enhance Conference för användare. 30 minuters video går igenom exempel på CSS-rutnät i åtgärd och hon berör hur man skriver kod i en tid för övergångsteknik.
Titta på videon och sedan kan du också gå igenom bildspelet också. Paret är ganska användbart för att tänka på CSS-nätet i bredare termer.
13. CSS Grid Playground
Klar för att testa alla CSS grid idéer och färdigheter? CSS Grid Playground innehåller rutnät behållare och rutnät platser så att du kan börja kodning och se vad som händer i realtid.
Det är ett bra sätt att bli bekväm med grunderna och se förändringar när du gör dem. (Det känns nästan som ett spel.)
Slutsats
Sluta förhöjning om du inte har tagit språnget i att lära känna dig åtminstone med CSS-nätet. Gör det som ett mål att bli bekväm med bästa praxis så att du bättre kan förstå hur det fungerar och hur du använder det.
Här är ett rop ut till alla folket där ute som ger stora resurser om CSS-nätet. Du måste erkänna webbdesign och utveckling samhället är ganska fantastiskt när det gäller kunskapsdelning. Om du använder en av dessa lektioner eller handledningar och dra nytta av det, se till att du delar kärleken med författaren och låt honom eller henne veta att de har hjälpt dig.