Skapa moderna layouter enkelt med Gridlex CSS Grid System
Frontend utveckling har förbättrats radikalt med introduktionen av CSS flexbox. Detta gör det mycket lättare att skapa galler och kolumner som naturligtvis ändras för lyhörda layouter.
I stället för att koda ditt eget flexboxnät från början, är det mycket lättare att använda ett verktyg som Gridlex. Detta gratis open source flexbox bibliotek är super-lätta och väldigt lätt att anpassa.
Allt du gör är lägg till Gridlex stilark till din webbsida och arbeta med sina nätklasser. Interna kolumner tar en klass .col och du sätter ihop alla dessa inuti a .rutnät behållare. Detta definierar varje kolumn i samma bredd och skapar ett enhetligt gränssnitt.
Denna standard kan överskridas genom att lägga till dimensionerings klasser till varje kolumn. På så sätt kan du ha en kolumn med 70% bredd och en annan kolumn med 30% bredd (t ex innehåll / sidofält).
Du hittar massor av rutprover på Gridlex hemsida med levande demo och kod snippets att kopiera / klistra in på din webbplats. Det är ett stort bibliotek med så många valfria klasser för att hjälpa dig att bygga de enklaste rutorna för vilken webbplats som helst.
Alla nät lägger till en totalt 12 minikolonner, så du kan definiera hur mycket utrymme varje kolumn ska ta upp. Det kan tyckas förvirrande men det är vettigt när du ser de visuella demoserna.
Här är en kod exempel används för ett större galler med olika bredder:
.........
Observera att .rutnät klassen innehåller allt och kolumnerna försöker delas i 12 delar (i exemplet skulle detta vara ⅓ bredd för varje). De fasta kolumnerna spänn 2 och 6 kols respektive, så den allra första kolumnen använder en automatisk bredd baserat på vad som är kvar.
Med hjälp av de andra två kolumnerna kan vi härleda att det skulle finnas 4 kolumner (12-6-2) kvar till slå totalt 12. Det är allt väldigt enkelt matte men klassnamnen kan vara förvirrande. När du börjar spela med Gridlex på ett projekt, hämtar du namnsystemet snabbt.
Gridlex är för närvarande i version 2.x och det är det ständigt uppdateras på GitHub. När webbläsarstöd växer, skulle jag garantera mer uppmärksamhet åt flexbox, med fler webbplatser som antar denna modell för sidnät.
Du kan även hitta en fullt galleri av webbplatser som kör Gridlex för att se hur det ser ut när de tillämpas på levande webbplatser.
Om du aldrig har använt Flexbox innan Gridlex kan vara ett roligt bibliotek att spela med. Men jag rekommenderar också att träna först med att använda roliga flexbox-spel för att testa din kunskap och hjälpa dig att förstå de grundläggande principerna.
Gridlex är tillgänglig gratis i GitHub repo eller du kan dra den via npm eller bower. Det ger fullständig dokumentation på huvudsidan, inklusive demo för kolumner med varierande bredd och mediefrågor.
Du har full kontroll över flexboxdesignen och den bara tar några CSS-klasser för att få det att hända! Och om du någonsin har en snabb fråga eller vill dela en webbplats du byggt med Gridlex kan du meddela skaparen på Twitter @webdevlint.
