CSS är en knepig grej. Hundratals egenskaper, ett dussin sätt att centrera ett block, och justify-content med 12 värden som dessutom kombineras med safe och unsafe. Fusklappar hjälper i början, men verklig förståelse kommer bara med övning. Helst inte i produktion klockan tre på natten.

Lyckligtvis kom frontend-communityt på ett bättre sätt: spel. Ja, riktiga webbläsarspel där du styr grodor, försvarar torn, räddar utomjordingar och omedvetet bemästrar flexbox, grids och selektorer. Ingen teori för teorins skull, bara kod du ser i aktion direkt.

Jag har samlat 8 gratis CSS-spel som faktiskt fungerar 2026. Varje spel täcker ett specifikt ämne, från grundläggande selektorer till 3D-transformationer. Plus på slutet, en video med en komplett genomgång av det populäraste spelet, ifall du fastnar på en nivå.

💡 Snabb översikt:

• Börja med Flexbox Froggy: den bästa startpunkten för nybörjare, 24 nivåer med omedelbar visuell återkoppling, som täcker alla viktiga flexbox-egenskaper.
• Gå vidare till Grid Garden och bemästra CSS Grid på ett lekfullt sätt, 28 nivåer från samma skapare på Codepip.
• Höj nivån på dina selektorer i CSS Diner (32 nivåer): efter detta kommer ingen :nth-child() att skrämma dig.
• Bemästra avancerade tekniker: Flexbox Defense för stridsläge, Unfold för 3D-transformationer, Roadmap för att läsa källkod.

Snabb jämförelse: vilket spel ska du välja

Video: komplett genomgång av Flexbox Froggy med förklaring av varje egenskap. Om du fastnar på en nivå, kolla tidsstämpeln i beskrivningen.

1. Flexbox Froggy

Detta är förmodligen det mest kända CSS-spelet i världen. Skapat av Codepip-studion, det tar dig genom 24 nivåer, från enkel justify-content: flex-end till kluriga kombinationer som flex-direction, align-items, align-content, flex-wrap, flex-flow and order. Mekaniken är enkel: du skriver en CSS-egenskap, grodan hoppar till rätt näckrosblad.

Den sista nivån, 24, är legendarisk. Den kräver flex-direction: column-reverse tillsammans med flex-wrap: wrap-reverse och align-content: space-between. Klarar du den på första försöket har du bemästrat flexbox fullständigt.

🔗 Flexbox Froggy | 🔗 Källkod på GitHub

2. Flexbox Defense

Tornförsvar där tornen är utbytta mot CSS-egenskaper. Dina torn är placerade i ett rutnät, och för att sikta dem mot fiender skriver du justify-content och align-items. 12 nivåer täcker align-items, justify-content, flex-direction, align-self and order.

De sista 4 nivåerna är en rejäl utmaning även för dem som redan klarat Flexbox Froggy. Inga ledtrådar: bara du, webbläsaren och vågor av fiender. Skaparen, Channing Allen, släppte spelet på GitHub helt öppet.

🔗 Flexbox Defense | 🔗 Källkod

3. Grid Garden

Från skaparna av Flexbox Froggy, samma idé men för CSS Grid. Du vattnar morotsland genom att skriva grid-column-start, grid-column-end, grid-row-start, grid-row-end, grid-template-columns, grid-template-rows, grid-area and order. 28 nivåer, 4 fler än Froggy.

Spelet går djupare än grundläggande grid-template-columns: 1fr 1fr. På nivå 25+ jobbar du med grid-area och namngivna områden, en teknik som i riktiga projekt ersätter de flesta flexbox-hack för grid-layouter.

🔗 Grid Garden | 🔗 Källkod

4. CSS Diner

32 nivåer om CSS-selektorer, från enkla plate till plate:only-child och apple:not(.small). Du "beställer" element från bordet genom att skriva en selektor i editorn till höger. Markering i realtid visar exakt vad du har valt.

Det mest värdefulla här är nivåerna med pseudoklasser. Efter CSS Diner får konstruktioner som :nth-child(2n+3), :last-of-type, :only-of-type dig inte längre att vilja öppna MDN. Och nivå 32 (plate pickles + apple:not(.small)) är en värdig final för den som vill kalla sig selektorexpert.

🔗 CSS Diner | 🔗 Källkod

5. Unfold

Tekniskt sett är detta inte ett spel utan en interaktiv presentation av CSS 3D transforms av Chris Ruppel. Du scrollar, och sidan vecklas ut i tredimensionell rymd. rotateX, rotateY, translateZ, perspective: allt som låter skrämmande i dokumentationen visas visuellt här.

Du behöver inte skriva en enda rad kod. Bara scrolla, se en platt rektangel förvandlas till en kub och läs författarens kommentarer. Efter detta slutar 3D-transformationer att kännas som svart magi.

🔗 Unfold | 🔗 Källkod

6. Roadmap

Ett litet arkadspel av Victor Darras: en bil rör sig längs vägen, och du styr den med musen. Hela spelet är skrivet i ren CSS och HTML, inte en enda rad JavaScript. Det betyder att du kan öppna DevTools och se exakt hur clip-path, transform och @keyframes-animationer fungerar.

Spelet i sig lär inte ut CSS direkt. Men att studera källkoden är en minikurs i avancerade tekniker. Det tog mig 8 försök att vinna.

🔗 Roadmap på CodePen

7. Carnival

Ett skjutgalleri i ren CSS av Una Kravets från Google Chrome-teamet. Du har 8 sekunder på dig att träffa alla mål. All logik ligger i kryssrutor och CSS-animationer: målen rör sig, dyker upp och försvinner utan en enda rad skript.

CodePen-länken nedan leder till den fullständiga källkoden, du kan förgrena den, justera tiderna i @keyframes och göra din egen version. En utmärkt övning för att förstå hur långt du kan nå med enbart CSS.

🔗 Carnival på CodePen

8. Tic-Tac-Toe

En klassiker i ett oväntat utförande: tic-tac-toe utan JavaScript. Alvaro Montoro implementerade spellogiken uteslutande med kryssrutor, pseudoklassen :checked och CSS-animationer. Två svårighetsgrader, på den andra "tänker" datorn lite bättre (så mycket som är möjligt utan skript).

Praktisk nytta: efter att ha granskat källkoden förstår du hur intilliggande selektorer (+), :checked fungerar och hur du bygger komplex logik enbart med stilar. För småprojekt och demos, en ovärderlig teknik.

🔗 Tic-Tac-Toe på CodePen

⁉️🤔 Vanliga frågor

Hjälper de här spelen en nybörjare som inte kan CSS alls?

Ja, det är precis vad de skapades för. Börja med Flexbox Froggy, spelet tar dig från justify-content: flex-start till komplexa kombinationer utan några förkunskaper. Ha MDN:s Flexbox-dokumentation öppen parallellt för sammanhang. På 2-3 kvällar har du full koll på flexbox.

Finns det någon poäng med att spela igenom spelen för en erfaren utvecklare?

Ja, men selektivt. Istället för Flexbox Froggy (blir tråkigt på de första 15 nivåerna) kör Flexbox Defense direkt, stridsatmosfär och striktare begränsningar. Grid Garden är användbart även för den som skriver grid-template-columns dagligen: nivå 25+ med grid-area visar tekniker som sällan dyker upp i tutorials. CSS Diner på nivå 25-32 är det bästa testet för kunskaper om pseudoklasser.

Varför spel istället för en videokurs eller dokumentation?

Spel ger omedelbar visuell återkoppling, du skrev align-items: center och såg direkt grodan hoppa till mitten. Det är den grundläggande skillnaden mot att passivt titta på video: muskelminnet formas eftersom du skriver koden själv. Plus utmaningsmomentet: viljan att klara nästa nivå håller dig engagerad bättre än någon deadline.

Motsvarar de här spelen moderna CSS-specifikationer (2026)?

Ja. Flexbox och Grid är mogna specifikationer, deras grundläggande egenskaper har inte ändrats på flera år. Nya funktioner som align-content i normalt flöde (2024) eller if()-villkor (2025) täcks inte i dessa spel, men det är nischade funktioner som inte behövs i det dagliga arbetet. För de allra flesta verkliga layouter räcker det som dessa spel lär ut.

Vad ska jag göra om ett spel inte fungerar i min webbläsare?

Alla 8 spelen testades i Chrome och Firefox, inga problem hittades. Om ett spel inte laddas: kontrollera om JavaScript är blockerat (Flexbox Defense och Roadmap kräver skript); testa att öppna i inkognitoläge (tillägg kan ibland förstöra layouten). Tic-Tac-Toe och Carnival på CodePen kan kräva att du klickar på "Run" för att starta.

Är det värt att spela CSS-spel 2026?

Dessa 8 spel är inte bara underhållning för en kväll. Varje spel täcker en specifik lucka: Flexbox Froggy plus Flexbox Defense ger fullständig flexbox-täckning från olika vinklar, Grid Garden är den mest smärtfria ingången till CSS Grid, CSS Diner är selektorer utan utantillinlärning, och Roadmap, Carnival och Tic-Tac-Toe visar hur djupt du kan gå med enbart CSS.

Om du är nybörjare, börja med Froggy, sedan Grid Garden, sedan Diner. Tre kvällar, och du behärskar det mesta av vad du faktiskt behöver i arbetet. Om du är erfaren, hoppa över de första 15 nivåerna av Froggy, men slutför definitivt CSS Diner till slutet och granska källkoden för Carnival. Båda tar mindre än en timme.

Alla 8 spelen är gratis, öppna (utom Roadmap, källkoden är läsbar direkt i DevTools) och fungerar 2026 utan ändringar. Ingen registrering, inga betalplaner. Öppna det första spelet och skriv CSS.