by Freja Busby
CSS Grid är relativt nytt i frontend-världen. Det började utvecklas för några år sedan och fick under förra året stor uppmärksamhet. Sedan dess har Grid tagit stora kliv mot att bli en standard inom CSS. Det som stoppar Grid från att användas på daglig basis är att det fortfarande saknar stöd i vissa webbläsare. Det går dock framåt i rask takt. Jag tror att vi inom något år kommer se ett flitigt användande av CSS Grid.
Vi har denna vecka haft turen att kunna ägna en hel dag till att lära oss CSS Grid. En senior frontend utvecklare kom och besökte oss för en genomgång i hur det fungerar. Sedan fick vi göra en individuell uppgift där vi layoutade med hjälp av Grid. Kursen har ett stort fokus på det praktiska, vilket är perfekt för mig eftersom jag lär mig bäst genom att testa mig fram till olika lösningar.
Innan jag visar resultatet av uppgiften kanske ni vill veta mer om vad CSS Grid faktiskt är
Grid är som sagt ett nytt sätt att skapa layouts med CSS. Man kan med detta skapa en ”rutnäts”-baserad layout som byggs upp via kolumner och rader. Det innebär att man nu kan styla både vertikalt och horisontellt, på ett betydligt enklare sätt. En annan viktig del är att man kan ändra ordningen på sina objekt helt oberoende av ordningen i dokumentobjektmodellen (DOM). Man kan också kombinera Grid med exempelvis Flexbox och float om man skulle vilja. Sammanfattningsvis kan du, med hjälp av Grid, lättare bygga avancerade layouter.
Exempel på layouts som du enkelt kan skapa med Grid:
Och mitt resultat av uppgiften:
Vill du veta mer?
Här kommer några lästips:
W3Schools CSS Grid
MDN web docs – CSS Grid Layout
Nästa vecka kör vi äntligen igång med Node.js, det ska bli så spännande! ⚡ Vi hörs snart igen
