CSS Grid - den stora guiden för att lära sig CSS Grid-layouter

10 Min.
CSS Grid Layouts - Den kompletta guiden för att lära sig CSS Grid

Flexbox borde vara bekant för alla vid det här laget och har redan gett många utvecklare en lugn natt. Men tänk om du kunde utöka din Flexbox-layout inte bara vertikalt utan även horisontellt? Detta och mycket mer är möjligt tack vare integreringen av CSS Grid.

Tänk om det fanns ett sätt att fritt utforma din webbplats i ett tvådimensionellt rutnät. Till exempel genom att skapa textblock som delvis överlagrar bilder. Eller ännu mer komplexa bildgallerier utan negativ marginal eller positionering. Med hjälp av CSS kan du snabbt utforma sidmallar som också är responsiva. Det finns en lösning på allt detta: CSS Grid.

Vad är CSS Grid?

I likhet med Flexbox integreras CSS Grid också med hjälp av ett behållarelement och CSS Grid Items. Vi hittar också några egenskaper för positionering av Flexbox: align-items, justify items, justify self och align-self. Dessa hjälper dig att placera innehållet i rutnätet på rätt sätt.

I grova drag är CSS Grid en flexbox som fungerar tvådimensionellt:

Vad är CSS-Grid
Hur rutnätssystemet fungerar med Bootstrap

Med Flexbox kan vi bara bygga rader och motsvarande kolumner horisontellt, men CSS Grid ger oss möjlighet att ordna dem vertikalt också:

CSS rutnätslayout
CSS Grid är ett kraftfullt verktyg för att skapa tvådimensionella layouter på webben.

Vid en första anblick kan CSS Grid verka relativt ospectakulärt. Du kan trots allt uppnå samma resultat med rader och kolumner.

Vad är det som gör CSS Grid så speciellt?

Med det nya rutnätssystemet kan du bygga alla tänkbara kombinationer. Det enda villkoret är att de måste vara rektangulära. Rena L-former kan till exempel inte konstrueras.

På så sätt kan du planera och bygga hela sidlayouten utifrån CSS Grid. Nested grids är lika möjligt som kombinationen av CSS Grid och Flexbox.

Genom smart planering kan du nu också programmera dina layouter på ett sådant sätt att du i möjligaste mån kan klara dig utan media queries, men det behöver du naturligtvis inte. Jag kommer att gå närmare in på de olika möjligheterna senare.

CSS Grid innehåller också ett antal nya CSS-trick som kommer att göra ditt liv enklare i framtiden. En av dem är den nya CSS-enheten: den så kallade fraktionen (fr). Detta fungerar på samma sätt som uppdelningen av flexboxelementens storlek. 

En bråkdel (1fr) är en del av en hel rad. Om du delar upp rutnätet i 3×4 som i exemplet nedan från CSS Tricks är 1fr = ¼ eller 25 %.

Här finns också en annan särskild egenskap: Alla rutor behöver inte fyllas med innehåll. Du kan också tilldela tomt innehåll i CSS-gallret:

CSS Grid Tomt utrymme
Tomt innehåll i CSS Grid

W3Schools visar andra möjliga layouter för vilka CSS-grids är lämpliga. På så sätt kan vi enkelt bestämma att vissa element ska spridas horisontellt och vertikalt över ett visst antal rutor. Rutor kan vara olika breda (kolumner) och höga (rader).

CSS Grid bästa layouter
Layouter i CSS Grid

I exemplet ovan tar den första kolumnen procentuellt sett mer bredd än de andra. Detta beror på att bredden inte var fördefinierad i CSS och att den därför automatiskt anpassas till innehållet. Samma sak skulle hända om vi skapade mer innehåll än vad vi har definierat i CSS. Därefter förstoras rutnätet automatiskt och det nya innehållet läggs till.

Shopwares shoppingvärldar är baserade på ett CSS Grid-liknande system - åtminstone i backend-vyn. I deras WYSIWYG-redigerare kan innehåll visas i ett rutnät som vid en första anblick liknar CSS-grid. På den kompilerade sidan används dock inget CSS-grid, åtminstone inte som standard.

Bästa praxis för CSS-grid
Ombyggd startsida för Shopware i designern för shoppingvärldar

Sedan 2017 stöds CSS Grid av nästan alla vanliga webbläsare. Endast Internet Explorer-versioner från och med version 10 behöver fortfarande prefixet -ms- för att kunna visa CSS-grid nästan helt och hållet. Microsoft Edge har däremot redan full integration. Nu finns det inget som hindrar dig från att använda CSS Grid i dina framtida projekt:

Definiera CSS-grid
Vilka webbläsare stöder CSS Grid

Hur ser CSS Grid ut i praktiken?

Som redan nämnts använder vi den grundläggande funktionen på samma sätt som flexbox. Först bestämmer vi en behållare som vi tilldelar rutnätsfunktionerna.

.container {
		display: grid;}

Det finns många andra värden som du kan tilldela för att bygga rutnätet enligt dina önskemål:

grid-template-columns, grid-template-rows och grid-template-areas (alla dessa kan också ställas in med grid-template ). Dessa egenskaper innehåller information om antalet och storleken på rader och kolumner. Du kan också definiera avstånden mellan dem med egenskaperna column-gap och row-gap (eller gap förkortat).

Du har också möjlighet att bestämma den övergripande placeringen i rutnätet, på samma sätt som flexbox. För detta ändamål finns egenskaperna: justify-items, align-items (kort: place-items), justify-content, align-content (kort: place-content).

Med egenskapen grid-auto-flow kan du också bestämma i vilken riktning rutnätet ska flyta med värdena rad, kolumn eller tät. Medan rad och kolumn tar hand om den horisontella respektive vertikala inriktningen avgör dense att rutnätet är fyllt på ett ekonomiskt sätt. Det betyder att med detta värde kan arrangemanget av dina element i rutnätet ändras under vissa omständigheter för att fylla tomt utrymme. Detta är en särskilt intressant funktion för bildgallerier. På så sätt flyttas elementen upp i olika skärmstorlekar om det behövs och inga visuella luckor skapas.

Medan du definierar kolumnerna och raderna i behållaren, samt avstånden mellan dem, använder du rutnätsposterna för att bestämma exakt var de ska placeras i rutnätet. 

Ett färdigt rutnät kan se ut så här på CSS-sidan:

.container {
		display: grid;
grid-template-columns: 40px 1fr 1fr 1fr 40px;
grid-template-rows: 25% 100px auto;
gap: .5rem .8rem
justify-items: stretch;}

Nu när du har skapat din rutnätbehållare är det dags att fylla den med rutnätsobjekt. Det som är speciellt med CSS-gallret är att ordningen i HTML kan vara sekundär, eftersom du kan ge varje objekt en start- och slutkoordinat. Detta görs med grid-column-start, grid-column-end, grid-row-start, grid-row-end .

Koordinaterna pekar på rasterlinjerna och räknas från vänster till höger, eller från toppen till botten. Dessa kan också förkortas som grid-kolumn och rader. 

Avancerade användare kan också använda grid-area för att ge fälten alla koordinater på en gång eller tilldela ett namn till ditt gridobjekt, vars placering du sedan själv kan bestämma i gridbehållaren. Men du kan inte bara namnge rutnätets objekt. Det är också möjligt att ge namn åt rutnätlinjerna så att du kan ange rutnätsposternas koordinater med hjälp av dessa namn. På så sätt slipper du räkna genom rutnätet.

Även användningen av negativa värden, eller att räkna från vänster till höger, från botten till toppen är möjligt. Dessa är dock mer intressanta för avancerade användare av CSS Grid och kan läsas i detalj här:

Slutligen har du också möjlighet att individuellt bestämma placeringen av innehållet i rutnätsposterna. Detta görs med egenskaperna: justify-self och align-self (kort sagt: place-self).

Ett rutnätsposter i CSS kan se ut så här:

.item-a {
		grid-column-start: 1;
  		grid-column-end: span 4;
  		grid-row-start: 2;
  		grid-row-end: span 2;
align-self: center;}

Rutnätets radslut och rutnätets kolumnslut kan också användas med "span +n". Här slipper du tråkig radräkning. "Span 2" anger att objektet ska sträcka sig över två rutnätfält. Detaljerade förklaringar av de enskilda egenskaperna finns i guiden CSS Tricks.

Exempel från webben

Om du är en visuell typ som jag behöver du se några exempel från verkligheten för att förstå CSS-grid fullt ut. För att göra det här gjorde jag en liten sökning på internet för att hitta sidor som antingen skapats med CSS Grid eller som skulle kunna dra nytta av att använda det.

CSS Grid i praktiken
CSS Grid för att skapa en portfölj

Levon Biss använde CSS Grid som ett implementeringsverktyg för att skapa sin portfölj. Om du tittar närmare på hans sida med hjälp av undersökningsverktyget kommer du att märka att sidan är byggd med inbäddade rutnätssystem. Först delades sidan upp i tre delar: Rubrik, huvud och sidfot. Höjden för rubriken och sidfoten var fördefinierad, medan huvuddelen med värdet "auto" kan växa flexibelt med innehållet. Kolumnerna har satts med 1fr på hela den tillgängliga bredden.

.page-wrap {
   height: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 96px auto 72px;
}

Huvuddelen av hans sida var återigen paketerad i ett rutnätssystem. Lägg märke till att CSS-enheterna px och fr blandas här. På så sätt har gränsen en fast bredd på 144px vardera, medan den mellersta delen förblir flexibel.

.gallery-wrap{
   display: grid;
   grid-template-columns: 144px 1fr 144px;
   grid-template-rows: 1fr;
   height: 100%;
}

Slutligen har galleriet också nästlats in i varandra en gång till. Tidigare har inga värden angetts för rutnätsgapen. För galleriet har dessa nu satts till 1em. På så sätt slipper du lägga till marginal mellan bilderna. Du kan alltså ställa in luckorna en gång i dokumentet. 

.grid {
   display: grid;
   grid-template-columns: repeat(12,1fr);
   grid-gap: 1em;
}

En annan speciell funktion i CSS Grid är repeat(). Detta är en förkortad beteckning för upprepade värden. 

Repeat() tar den uppsättning värden som ska skapas som första värde och storleken som andra värde. I skriven form skulle det se ut på följande sätt:

.grid {
   grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
CSS Grid i praktiken
Exempel på en webbplats utan CSS-grid

I det här exemplet användes inget CSS-galler. Precis som i det föregående exemplet kunde vi antingen ha bäddat in rutnätet eller lagt till en marginal till rutnätbehållaren för det yttre avståndet.

Så här kan rutindelningen se ut: 

CSS rutnätslayout
Exempel på en webbplats med CSS-grid

Ett möjligt tillvägagångssätt för CSS kan se ut så här:

.container {
  margin: 0.5em 3em;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px 80px auto;
	gap: .5rem;
}

.logo {
  grid-area: 1 / 1 / 2 / span 3;
  justify-self: start;
}
.nav {
  grid-area: 1 / 4 / 2 / span 3;
  justify-self: end;
}
.header {
  grid-area: 2 / 1 / 3 / span 6;
  justify-self: center;
}
.logo,
.nav,
.header {
  	align-self: center;
}
.img {
  grid-column: span 2;
  grid-row: span 2;
}
.img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
CSS rutnätslayout
Den här webbplatsen skulle också kunna dra nytta av CSS Grid

Även om hela Larq-webbplatsen skulle ha kunnat dra nytta av CSS-gridet, valde jag bara ut ett litet område för att illustrera det. Det är just här som fördelen med ett tvådimensionellt rutnät blir tydlig.

Så här kan fördelningen av rutnätsposterna se ut:

CSS Grid Grid Items
CSS Grid på en exempelsida

Ett möjligt tillvägagångssätt för CSS kan se ut så här:

.container {
  margin: 0.5em 5em;
  display: grid;
  grid-template-columns: repeat(3, 1fr) 50px repeat(3, 1fr);
  grid-template-rows: 3rem 20px 100px 100px;
  gap: 1rem;
}

.heading {
  grid-column-start: 1;
  grid-column-end: 8;
  grid-row-start: 2;
  grid-row-end: 1;
  justify-self: center;
}
.img-a {
  grid-area: 3 / 1 / span 2 / span 1;
}
.img-b {
  grid-area: 3 / 2 / span 1 / span 1;
}
.img-c {
  grid-area: 4 / 2 / span 1 / span 1;
}
.textblock {
  grid-area: -3 / -4 / span 2 / span 2;
  align-self: center;
}

Hur kan CSS Grid och WordPress kombineras?

Med den nya redigeraren WordPress kan innehåll nu också visas i rader och kolumner som standard. Layouten påminner mig dock mer om Bootstrap och co. och jag saknar den tvådimensionella utformningen lite. Det är förmodligen vad andra också tänkte, och det är därför de utvecklade Plugin Grids: Layout builder för WordPress . Plugin är gratis och gör exakt vad den lovar: den låter dig visuellt skapa CSS-galler utan att behöva använda en sidbyggare.

CSS rutnät Shopify
Plugin Grids: Layout builder för WordPress i bruk

Det speciella med CSS Grid är möjligheten att överlappa varandra utan att använda negativ marginal eller absolut positionering. Det är precis vad som är möjligt med Plugin . Med hjälp av z-index och även genom arrangemanget i själva rutnätet (det sista elementet är överst och det första längst ner) kan hierarkier visas.

Ovanstående exempel skulle kunna se ut så här som en webbplats:

Hur man använder CSS Grid
CSS Grid som ett praktiskt exempel

CSS Grid och @media-frågor

CSS Grid kan naturligtvis användas fritt med Flexbox och Media Query. Det finns dock en annan ny funktion som CSS Grid har med sig: minmax().

Som namnet antyder handlar detta om minimi- och maximivärden. Du kan använda detta i samband med kolumnerna. Till skillnad från Media Query är det inte skärmstorleken som frågas ut här, utan elementets storlek. Om rutan krymper så mycket att den inte längre uppfyller minimistorleken, förstoras och flyttas elementen så att den åter får plats.

Minmax() fungerar tillsammans med automatisk anpassning och kan se ut så här:

.grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

Här skapas kolumner med en minsta storlek på 240px och en största storlek på 1fr. I det här exemplet motsvarar 1fr hela rutnätets bredd. På så sätt kan flera rutnätsposter placeras bredvid varandra om det finns utrymme, men hela bredden kan användas om det inte finns tillräckligt med utrymme.

Men det finns också fördelar i samband med mediefrågan. Med hjälp av koordinaterna kan du placera och arrangera dina rutnätsposter på olika sätt för varje enhet. Särskilt i mobilen, där en annan hierarki kan råda än på skrivbordet, kan detta ge dig en trevlig användarupplevelse.

Alla specialfunktioner i en överblick

  • FR (fraktion) som ny CSS-enhet
  • Rutavsnitt och linjer kan ges namn
  • Ruta-kolumn-slut, kan användas med "span n".
  • Ange samma kolumner eller rader med repeat()
  • Gridobjekt kan ordnas godtyckligt (även överlappande) i rutnätet.

Ytterligare informationskällor om ämnet

  • En komplett guide till CSS Grid av CSS Tricks
  • En guide för att lära sig CSS Grid från Learn CSS Grid
  • Allt du behöver för att lära dig CSS Grid från Grid by Example
  • Testa dina färdigheter: Gridlayout från MDN Web Docs
  • Lär dig alla funktioner i CSS Grid på ett lekfullt sätt med CSS Grid Garden.
Har du några andra frågor?

Vilka frågor har du om CSS Grid? Vi ser fram emot dina kommentarer. Är du intresserad av webbdesign, utveckling och andra ämnen på WordPress ? Följ sedan RAIDBOXES på Twitter, Facebook, LinkedIn eller via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.