På Hamrén arbetar ju som bekant med WordPress, och för oss är det viktigt att våra kunders hemsidor är responsiva. De ska vara lika snygga på datorn, surfplattan och mobilen. Men det är inte alltid så lätt – mycket eftersom digitalt och tryck skiljer sig åt på sätt man kanske inte alltid tänker på.
Även som webbdesigner kan det ibland vara svårt att acceptera att regler som är självklara för tryckt material, inte alltid är lika applicerbara på digital plattformar. Ett av de områden som skiljer sig åt mellan de båda medierna är layout, där tabeller, floats och olika positioneringsproperties lämnar mycket i övrigt att önska – speciellt när det kommer till vertikal positionering. Det klassiska 12 kolumns-griddet har varit väldigt osmidigt att återskapa på webben. Tills nu!
CSS Grid Layout – ett enklare sätt att layouta på
I mars i år introducerades CSS Grid Layout, och vi på kontoret kända att våra drömmar besannades. Till skillnad från till exempel flexbox – en personlig favorit när det kommer till layout – kan CSS Grid hantera både en X och en Y-axel, samtidigt. Detta innebär att du kan jobba med både rader och kolumner på ett mycket smidigare sätt än tidigare.
CSS Grid för med sig en ny enhet för bredd och höjd, nämligen fraction (fr). En fraction är helt enkelt en del av helheten. Detta möjliggör för responsiv layout, även om pixlar också accepteras som enhet.
Så hur fungerar CSS Grid?
Rent krasst handlar det om ett omslutande element med display: grid; samt ett gäng barn-divar (där det dessutom fungerar jättebra att använda flexbox, för ytterligare layoutmöjligheter!)
Barnen i sig behöver inte komma i ordning eftersom layouten styrs helt i CSS. Detta gör i teorin att du kan ändra grid helt och hållet, utan att behöva gå in och rota i din HTML-struktur, vilket jag tycker är intressant.
Dessutom kan du döpa rader och kolumner, för att lättare hålla isär dem. Du kan se exempel på detta i mitt kodexempel nedan.
Detta är bara några av de många funktioner som CSS Grid för med sig. För komplett förståelse kan jag verkligen rekommendera CSS-tricks kompletta guide till CSS Grid, som innehåller allt du behöver veta. Om du hellre lär dig av en tutorial på YouTube så är den här jättebra.
Ett praktiskt exempel på CSS Grid layout
Jag kodade ihop ett exempel på en tidningsinspirerad layout, bara för att ge er en idé av hur det kan se ut. Du hittar exemplet på CSS Grid på CodePen.
Notera den ändrade element-ordningen i mobilversionen; att bilden ligger ovanför rubriken. Detta har tidigare inte varit möjligt att åstadkomma via CSS.
Webbläsarstöd
CSS Grid stöds i alla större webbläsare för desktop, inklusive IE och Edge. När det kommer till mobila enheter finns stöd i alla de större webbläsarna, utom Opera och Opera Mini. Du kan läsa mer om webbläsarstöd för CSS Grid på caniuse.com.
Hamrén Webbyrå börjar använda CSS Grid direkt
Sammanfattningsvis tycker jag att CSS Grid är ett riktigt spännande tillskott i CSS-djungeln. Framför allt tror jag att CSS Grid är användbart när det kommer till gallerifunktioner eller liknande, där CSS Grid nu möjliggör mer spännande designmöjligheter. Nästa vecka går en av de större projekt vi arbetat på under hösten live, och där kommer du kunna se att vi använt CSS grid för visning av relaterat innehåll, till exempel.
Så, om du själv har en hemsida där du gärna vill efterlikna ”analoga” layoutmetoder, eller om du helt enkelt vill ha ett enklare och framför allt responsivt sätt att visa data i kolumner – då tycker jag verkligen att du ska ta en titt på CSS Grid Layout!
