CSS Grid Layout, vanligtvis kallad bara "Grid," är ett tvådimensionellt layoutsystem för webben som gör det möjligt att skapa komplexa och responsiva webbdesigns på ett enkelt och rent sätt. Med Grid kan du definiera kolumner och rader i dina layouter, placera element var du vill inom dessa rader och kolumner och skapa responsiva webbsidor utan att vara beroende av externa ramverk.
Jag började skriva en tutorial om grid för några år sedan som ni kan titta på här. Den är inte riktigt färdig, men läs igenom den snabbt och titta på animationen på slutet, den ger en bra indikation på hur gridlinjerna fungerar.
För att använda CSS Grid behöver du definiera en container och göra den till en grid container. Därefter kan du styra layouten av de element (kallade grid items) som är barn till denna container.
För att definiera en container som en grid container, använder du egenskapen `display` med värdet `grid` eller `inline-grid`.
Du kan bestämma storleken på dina rader och kolumner med `grid-template-rows` och `grid-template-columns`.
Du kan påverka var dina grid items ska placeras med hjälp av `grid-column` och `grid-row`.
Enheten fraction, fr, använd som en flexibel enhet som försöker fördela det befintliga utrymmet mellan de items som finns i containern. Den försöker att ta upp det maximala utrymmet som den kan ta och detta fördelas utifrån det nummer som man anger framför enheten. Så om t.ex. anger två kolumner en med 1fr och den andra med 2fr så kommer hela det horisontella utrymmet att fyllas med dessa kolumner. Den kolumnen som har 2fr kommer att vara ungefär dubbelt så stor som kolumnen med 1fr. Denna inbördes storlek växer och minskar om fönstret ändrar storlek, men förhållandet mellan dem kommer att förbli detsamma.
Ta en titt på denna korta filmsnutt som förklarar hur enheten fr fungerar.
Med kommandot repeat så kan man skapa flera lika stora kolumner eller rader på ett snabbt sätt.
I exemplet ovan har vi skapat en grid container med tre flexibla kolumner (varje kolumn tar lika mycket plats). Vi har också använt `gap` för att skapa lite avstånd mellan varje grid item. Varje item har en enkel styling för att göra exempelt mer visuellt.
Ditt innehåll kan placeras på valfri plats i ditt grid. Man behöver inte visa innehållet i den ordning som de skrivs i HTML. Detta gör att grid är väldigt användbart i en flexibel design då man kan välja att helt flytta om materialet till exempel beroende på vilken skärmbredd man använder.
Här gör jag bara ett enkelt exempel då item3 får ta upp en tredje rad helt av sig själv.
Notera att item4 som är oformaterat endast tar upp en position i vårt grid och den tar också item3's plats eftersom det är den närmaste platsen den kan placera sig i.
Gör följande uppgifter:
Skapa en enkel rutnätslayout med tre kolumner av lika bredd och två rader. Varje rutnätselement(item) ska innehålla en färgad bakgrund och lite text. Använd denna övning för att öva på att sätta upp ett grundläggande rutnät med grid-template-columns, grid-template-rows och grid-gap. Förklara kort hur du har definierat din container och dina items.
Bygg ett responsivt fotogalleri som visar bilder i en tre-kolumnslayout på en bred skärm och byter till en en-kolumnslayout på mobila enheter(smalare skärm). Använd dig av minst 7st items för att se hur dessa placeras. För att underlätta så väljer du bilder i samma storlek. Men du kan också experimentera med hur du kan anpassa ditt grid så att breda bilder tar upp två kollumner och höga bilder tar upp två rader genom att ge dessa bilder separata klasser och använda dig av t.ex. grid-column: auto / span 2; för de bilder som ska vara extra breda (se det nedre exemplet på den här sidan).
Denna övning är tänkt att hjälpa dig att experimentera med och förstå CSS-rutnätets kraft för responsiv design och kanske även öva på att använda mediaquerys. Förklara kort vad du ändrar i din mediaquery för att byta layout.
Nu är en bra tid att titta på hur de i kapitel 15 Layout (sid 359+) anväder sig av grid. Notera speciellt sidorna 381- 404. Det är en designfilosofi som kan vara bra att ha i åtanke när man designar webbsidor.
grid-area är en kraftfull CSS-egenskap som gör det möjligt att namnge och positionera element inom en CSS Grid på ett mer lättöverskådligt sätt. Med grid-area kan du antingen specificera var ett element ska placeras inom vårt grid eller deklarera ett namngivet område som kan användas i grid-template-areas.
Den första användningen av grid-area är som ett kortare sätt att definiera upp utrymmet som ett item ska ta upp i din container. Man kan då direkt ange ett elements position och storlek inom rutnätet med en kortnotation för grid-row-start, grid-column-start, grid-row-end, och grid-column-end.
Först så tar vi bort all formatering på våra items sedan tidigare för att visa det här exemplet. Sedan skapas ett nytt grid som består av 9 rutor (3 kolumner och 3 rader). Därefter så defineras ett område för .item2 som gör att det tar upp både 2 kolumner och 2 rader med början på den första linjen.
Vi kan skapa en layout genom att namnge områden för att tydligt visa vilken typ av innehåll vi förväntar oss att ett område ska ha. Genom att kombinera namngivna områden med egenskapen grid-template-areas på vårt grid-container, kan vi enkelt skapa komplexa layouter. Varje värde inom grid-template-areas representerar en cell i vårt rutnät och motsvarar namnet på det område vi definierat för våra element.
Här fördelar vi upp våra grid-items (observera namnbytet för att lättare identifiera områdena i CSS-filen) och sedan tilldelas de ett specifikt område. Namnen på klasserna och områdena kan vara samma om så önskas.
Området för vårt innehåll kan nu fyllas med allt vi vill ska synas där, och detta gäller ju alla andra områden också.
När man designar en responsiv sida och använder sig av namngivna grid-areas så är det ofta enkelt att bara rita om sitt grid area med hur man vill att layouten ska se ut vid en viss skärmbredd. Titta på det här exemplet och notera hur de gjort inuti @media-selektorerna.
Gör en sida enligt följande instruktioner:
Gör en sidlayout som inkluderar ett rubrik-, fot-, sidofält- och huvudinnehålls-område. Tilldela varje sektion ett specifikt område på rutnätet med hjälp av egenskapen grid-area. Experimentera med olika grid-template-areas-värden för att se hur de påverkar layouten. Fyll sidan med något innehåll och visa hur man kan formatera upp innehållet på en sida genom att använda sig av grid-template-areas. Denna övning befäster konceptet med rutnätsområden och visar hur de kan förenkla din layoutdesign.
Läs mer om hur grid fungerar på exempelvis css-tricks som ger en bra överblick över hur grid fungerar generellt. Vill du ha mer tips på hur man kan använda grid på olika sätt så finns till exempel Grid by example som har en massa tips på olika layouter med grid. Är du mer intresserad av hur definitionen av grid ser ut så är mdn web docs en bra sida.
Titta igenom
Förståelsen av CSS Grid låter dig skapa invecklade layouter med mindre kod och mer flexibilitet. CSS Grid är också utformad för att fungera tillsammans med andra layouttekniker som Flexbox, vilket ger dig ett kraftfullt verktyg för att skapa responsiva webbsidor.