Hatar du CSS-gridramar men älskar de snabba layoutfördelar som de tillhandahåller? Kämpar du med matematiken och koden som behövs för att skapa egna flexibla flerskolans layouter på flyg?
Idag ska vi gå igenom dig genom att skapa ditt eget grundläggande, återanvändbara system för att skapa flera kolumner som du kan implementera någonstans när som helst med endast några rader kod. Ingen uppblåst kod eller icke-sematiska klassnamn krävs!
Grid Framework: Fördelar och nackdelar
Jag är en ganska stor fan av CSS-gridramar. Jag älskar att ladda ner dem, bryta dem öppna och se hur de kryssar. Jag har skrivit om nästan alla bra som jag kan hitta här på Design Shack och det kommer jag troligen att fortsätta att göra det i framtiden.
Fördelen med gridramar är en no-brainer: de gör löjliga snabba layouter. Om du har en ganska okomplicerad layout i åtanke för din webbplats kan du enkelt byta ut det och spendera mer tid att berika din design än att kämpa med hur du gör dina kolumner.
Men CSS grid ramar har också några ganska allvarliga nackdelar också. Till att börja med är många av dem ganska klara och går bra utöver enkla layoutklasser, samtidigt som de strävar efter att utsträckta stilera varje standard HTML-element som världen någonsin har sett, oavsett hur obskärlig. Det här problemet kan definitivt göra att ramarna är svåra att bryta sig om.
Gridramar är också ganska lätta. Du måste spela enligt sina regler eller du slutar bryta hela saken. Att anpassa koden efter eget tycke kan vara en lång och smärtsam process, vilket slår av den tidsbesparande idén.
Slutligen, många kodare är riktiga sticklers för semantisk kod och att skapa generiska, obskurligt namngivna klasser för layout gör dem verkligen frustrerande!
Bygg ditt eget
Som vi bara tydligt fastställde, älskar vissa människor CSS-ramverk, många hatar dem helt. Denna artikel riktar sig till kodarna som ligger någonstans mellan de två. Du gillar fördelarna som du får, till exempel snabb layout av flera kolumner, men du är inte övertygad om att dessa saker verkligen är värda alla problem.
Detta gäller särskilt för dem som bygger en ganska enkel webbsida. Visst, det vore trevligt att ha lite hjälp med layouten, men att lägga in en hel ram för en enda sida är att föra in en traktorgrävare för att plantera en trädplanta.
För dessa typer av projekt kan det vara bättre att överge gridramar helt och hållet. Det kan dock fortfarande behålla oss för att ha ett slags system på plats för att slå ut flera kolumner på flugan.
Målet är att skapa ett återanvändbart system som du kan implementera för att uppnå komplicerade layouter med flera kolumner. Systemet måste vara koncist och inte lida av uppblåst kod. Det borde inte kräva en enorm lista över icke-semantiska klasser, varav många du aldrig använder. Det bör också vara flexibelt och böja till din vilja med varje projekt i stället för att stödja dig i ett hörn. Om du ändrar dig och plötsligt ändrar hela bredden för webbplatsen, bör vårt rutnät återflöda sig med nollproblem. Slutligen bör genomförandet vara snabbt och smärtfritt.
Skapa kolumner i CSS
Om du precis börjat i CSS-layout kan det vara lite skrämmande att bygga en layout med flera kolonner. Självfallet, om det var svårt, skulle vi inte ha så många ramar som försöker förenkla processen!
Låt oss säga att du vill ställa in fyra kolumner. Först måste du ta hänsyn till din bredd. Låt oss säga att du har en 900px bred behållare. Om du delar 900px med fyra kolumner får du 225px per kolumn. Ganska enkelt! Men dessa kolumner kommer alla att krossa varandra, vi behöver några marginaler. Olyckligtvis kommer marginalerna att bromsa vår layout och expandera våra kolumner bortom förälderbredden.
Vad vi behöver göra är att räkna upp den totala mängden rum som behövs för marginaler. Låt oss säga att vi vill att den första, andra och tredje kolumnen ska ha en margin-höger av tre pixlar. Tre pixlar gånger tre kolumner motsvarar nio pixlar för marginaler. Nu tar vi helt enkelt nio från vår bredd (900 - 9 = 891) och delar sedan med fyra kolumner för att komma upp med 222.75px för var och en av de fyra kolumnerna.
Va?
Detta involverade självklart lite matematik från vår sida. Det är inte precis på college nivå, men det är inte kul att göra det varje gång vi behöver några kolumner (matte är också ganska ful). Vidare, så snart vi ändrar den totala bredden på vår behållare, bryter hela denna sak och vi måste börja om!
Så hur gör vi det så att när förälderna ändras följer barnen?
Använd procent i stället
Pixelvärden är fallsspecifika och för precisa att använda på något som vi vill vara återvinningsbara. Om vi ersätter percents blir vår matta enklare och vårt galler kommer att vara smart nog att anpassa sig till en föränderlig förälderbehållare. I huvudsak bygger vi ett fluidnät.
Skapa en Grid Calculator
Om vi vill ha snabb implementering kan vi inte tänka över all denna komplicerade matte varje gång! I stället för att köra alla dessa nummer i huvudet, låt oss skapa ett verktyg för att göra allt arbete för oss. Det är ganska enkelt med ett verktyg som heter Instacalc.
Instacalc är ganska mycket en snygg räknare med några mindre kalkylarkfunktioner. Vad vi får här är möjligheten att ställa in återanvändbara formler för att räkna ut vårt kolumnsystem. Du behöver bara göra det här en gång ihåg dig, när vi sätter upp det första gången kan du spara räknaren och komma tillbaka när du behöver det!
Här är den inställning som jag använde. Det första fältet kräver att du matar in antalet kolumner och den andra frågar om ett marginalvärde (detta kommer att vara i procent). Resten är automatiserad för att ge dig de resultat du behöver.Det tredje fältet visar din totala marginal och den fjärde berättar vilken kolumnbredd du behöver.
Om du inte vill ställa upp det här, stör inte! Använd bara gruvan. Med detta på plats kan vi enkelt beräkna de bredder som behövs för den fyra kolonnlayouten vi försökte ovan.
Nu, om vi vill byta till en tre kolumnlayout, är allt vi behöver göra typ? 3? i det första fältet i vår räknare. Resten tas hand om för oss. Det här gör allt arbete för att räkna ut flera kolonnlayouter. Ange bara ett nummer för dina kolumner och ett nummer för din marginal och du får allt du behöver. Ibland får du några slarviga siffror som resultat, men ärligt talat har jag funnit att det inte finns något problem att ställa in dina kolumner bredder på? 30,667% ?.
Bygg det!
Nog teori, låt oss bygga denna suger. Alla saker ovanför låter som en massa arbete, men ärligt är det sätt mer arbete att förklara det än att bygga det!
Låt oss säga att vi vill ha fyra kolumner med text som förklarar fyra funktioner på vår hemsida. HTML för detta är ganska enkelt, bara skapa ett omslag för avsnittet som helhet och en div för varje kolumn. Jag kastade också en? Sista? klass i sista kolumnen för att hjälpa oss att rensa marginalen.
Nu för CSS. Först ställer vi en bredd på omslaget och ställer in svämma över till dold. Därefter stilar vi helt enkelt funktionerna klass med matematiken som vår räknare spetsar ut. Det är viktigt att notera en gång till att vi inte behöver köra en enda beräkning i våra huvuden eftersom vi redan har denna räknare redan inrättad. Skriv bara in värdena och ta reda på vad kalkylatorn ger oss.
Se hur lite kod detta är? I stället för en gigantisk ram har vi några enkla deklarationer som alla kan läsa. Resultatet är en fin liten fyra kolumnlayout som anpassar sig perfekt till alla scenarier.
Härifrån kan vi ändra vår bredd till allt vi vill och gallret kommer att fixa sig själv. Vill du byta till 960px bred? Byt enkelt bredden på omslaget.
Om du vill ha ett bra fluidnät ändrar du omslagets bredd till en procent. Nu när du justerar webbläsarens storlek justeras dina kolumner automatiskt.
Kombinera kolumner
Den klara bland dig säger redan? Inte så fort ?. Det problem som vi har stött på här är att våra kolumner alla måste ha samma bredd. Till exempel, om vi vill kombinera de två sista kolumnerna i vår layout i en bred kolumn?
Allt vi behöver göra för detta är en formel i Instacalc som kombinerar två kolumner och tar bort marginalen för en av dem. Liksom resten är det en enstaka sak som du kan använda om och om igen. Här gjorde jag en formel för att kombinera två kolumner och en för att kombinera tre.
Koden
HTML för detta är precis som förra gången, bara vi har tre kolumner istället för fyra.
Än en gång kopplar vi bara in siffrorna från vår räknare och vi får en fin, kortfattad bit av CSS som gör exakt vad vi behöver det till.
Här är den resulterande layouten med den sista kolumnen dubbelt så bred som de två första. Med den här metoden kan du skära och tärning upp en oändlig kombination av olika bredder som du kan tillämpa över alla olika delar av din webbplats.
Lek med det
Jag uppmuntrar dig definitivt att hoppa in i den här koden och få dina händer smutsiga. Jag har skapat en levande lekplats över på JSFiddle för att du ska se dessa exempel lev och redigera dem efter eget tycke.
Klicka här för att starta demo
Slutsats
Vi hade ett antal olika mål när vi startade projektet. Vi bestämde oss för att bygga ett grundläggande nätsystem som är tillräckligt flexibelt för att kunna implementeras i en behållare av någon bredd, även om den behållaren ändrar storlek. CSS måste vara extremt kort och tillåta semantisk klassnamn. Slutligen måste implementeringen vara snabb.
Även om det är definitivt lite komplicerat att förstöra huvudet i början, uppnår vårt system alla dessa mål. Du kan argumentera för att det finns för mycket matematik att ringa det enkelt men i sanning har jag gett dig formlerna och den sparade räknaren som du behöver. Det enda som krävs av din sida är att ange två siffror varje gång du vill skapa en ny layout!
Den här artikeln är inte på något sätt en rekommendation att du alltid ska använda detta system för att bygga layouter med flera kolumner. Det är bara ett försök att visa dig att du inte behöver vara beroende av någon annans komplicerade och uppblåsta ram. Med en liten uppsättning inställningar och uppfinningsrikedom kan layouter med flera kolumner utföras på erforderligt sätt med mycket liten ansträngning!