CSS er en vrien greie. Hundrevis av egenskaper, et dusin måter å sentrere en blokk på, og justify-content med 12 verdier som også kombineres med safe og unsafe. Jukselapper hjelper i starten, men ekte forståelse kommer bare med øvelse. Helst ikke i produksjon klokka tre om natta.

Heldigvis fant frontend-miljøet på noe bedre: spill. Ja, ekte nettleserspill der du styrer frosker, forsvarer tårn, redder romvesener og uten å vite det mestrer flexbox, grids og selektorer. Ingen teori for teoriens skyld, bare kode du ser i aksjon umiddelbart.

Jeg har samlet 8 gratis CSS-spill som faktisk fungerer i 2026. Hvert spill dekker et spesifikt tema, fra grunnleggende selektorer til 3D-transformasjoner. Pluss, til slutt, en video med en full gjennomgang av det mest populære spillet, i tilfelle du står fast på et nivå.

💡 Rask oversikt:

• Start med Flexbox Froggy: det beste utgangspunktet for nybegynnere, 24 nivåer med umiddelbar visuell tilbakemelding, som dekker alle sentrale flexbox-egenskaper.
• Gå videre til Grid Garden og mestre CSS Grid på en leken måte, 28 nivåer fra de samme forfatterne i Codepip.
• Ta selektorene dine til neste nivå i CSS Diner (32 nivåer): etter dette vil ingen :nth-child() skremme deg.
• Mestre avanserte teknikker: Flexbox Defense for kampmodus, Unfold for 3D-transformasjoner, Roadmap for å lese kildekode.

Rask sammenligning: hvilket spill bør du velge

Video: full gjennomgang av Flexbox Froggy med forklaring av hver egenskap. Hvis du står fast på et nivå, sjekk tidsstempelet i beskrivelsen.

1. Flexbox Froggy

Dette er trolig det mest kjente CSS-spillet i verden. Laget av Codepip-studioet, tar det deg gjennom 24 nivåer, fra enkel justify-content: flex-end til vanskelige kombinasjoner som flex-direction, align-items, align-content, flex-wrap, flex-flow and order. Mekanikken er enkel: du skriver en CSS-egenskap, frosken hopper til riktig vannliljeblad.

Det siste nivået, 24, er legendarisk. Det krever flex-direction: column-reverse sammen med flex-wrap: wrap-reverse og align-content: space-between. Klarer du det på første forsøk, har du mestret flexbox perfekt.

🔗 Flexbox Froggy | 🔗 Kildekode på GitHub

2. Flexbox Defense

Tårnforsvar der du i stedet for kanontårn har CSS-egenskaper. Tårnene dine er plassert i et rutenett, og for å sikte dem mot fiender skriver du justify-content og align-items. 12 nivåer dekker align-items, justify-content, flex-direction, align-self and order.

De siste 4 nivåene er en skikkelig utfordring selv for dem som allerede har fullført Flexbox Froggy. Ingen hint: bare deg, nettleseren og bølger av fiender. Forfatteren, Channing Allen, la ut spillet på GitHub helt åpent.

🔗 Flexbox Defense | 🔗 Kildekode

3. Grid Garden

Fra skaperne av Flexbox Froggy, samme idé men for CSS Grid. Du vanner gulrotbed ved å skrive 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 flere enn Froggy.

Spillet går dypere enn grunnleggende grid-template-columns: 1fr 1fr. Fra nivå 25 og oppover jobber du med grid-area ved hjelp av navngitte områder, en teknikk som i reelle prosjekter erstatter de fleste flexbox-hack for grids.

🔗 Grid Garden | 🔗 Kildekode

4. CSS Diner

32 nivåer om CSS-selektorer, fra enkel plate til plate:only-child og apple:not(.small). Du «bestiller» elementer fra bordet ved å skrive en selektor i editoren til høyre. Sanntidsutheving viser nøyaktig hva du har valgt.

Den mest verdifulle delen her er nivåene med pseudoklasser. Etter CSS Diner slutter konstruksjoner som :nth-child(2n+3), :last-of-type, :only-of-type å gi deg lyst til å åpne MDN. Og nivå 32 (plate pickles + apple:not(.small)) er en verdig finale for dem som vil kalle seg selektoreksperter.

🔗 CSS Diner | 🔗 Kildekode

5. Unfold

Teknisk sett er dette ikke et spill, men en interaktiv presentasjon av CSS 3D transforms av Chris Ruppel. Du scroller, og siden folder seg ut i tredimensjonalt rom. rotateX, rotateY, translateZ, perspective: alt som høres skummelt ut i dokumentasjonen, vises visuelt her.

Du trenger ikke skrive en eneste linje kode. Bare scroll, se et flatt rektangel forvandles til en kube, og les forfatterens kommentarer. Etter dette slutter 3D-transformer å virke som svart magi.

🔗 Unfold | 🔗 Kildekode

6. Roadmap

Et lite arkadespill av Victor Darras: en bil beveger seg langs veien, og du styrer den med musen. Hele spillet er skrevet i ren CSS og HTML, ikke en eneste linje JavaScript. Det betyr at du kan åpne DevTools og se nøyaktig hvordan clip-path, transform og @keyframes-animasjoner fungerer.

Selve spillet lærer deg ikke CSS direkte. Men å studere kildekoden er et minikurs i avanserte teknikker. Det tok meg 8 forsøk å vinne.

🔗 Roadmap på CodePen

7. Carnival

Et skytegalleri i ren CSS av Una Kravets fra Google Chrome-teamet. Du har 8 sekunder på deg til å treffe alle blinkene. All logikken ligger i avkrysningsbokser og CSS-animasjoner: blinkene beveger seg, dukker opp og forsvinner uten en eneste linje med skript.

CodePen-lenken nedenfor fører til full kildekode, du kan forke den, justere timingen i @keyframes og lage din egen versjon. En utmerket øvelse for å forstå hvor langt du kan komme med CSS alene.

🔗 Carnival på CodePen

8. Bondesjakk

En klassiker i en uventet utførelse: bondesjakk uten JavaScript. Alvaro Montoro implementerte spillogikken utelukkende med avkrysningsbokser, pseudoklassen :checked og CSS-animasjoner. To vanskelighetsgrader, på det andre nivået «tenker» datamaskinen litt bedre (så langt det er mulig uten skript).

Praktisk nytte: etter å ha gransket kildekoden vil du forstå hvordan nabo-selektorer (+), :checked fungerer, og hvordan du bygger kompleks logikk med stilark alene. For småprosjekter og demoer er dette en uvurderlig teknikk.

🔗 Bondesjakk på CodePen

⁉️🤔 Ofte stilte spørsmål

Vil disse spillene hjelpe en nybegynner som ikke kan CSS i det hele tatt?

Ja, det er nettopp det de ble laget for. Start med Flexbox Froggy, spillet tar deg fra justify-content: flex-start til komplekse kombinasjoner uten forkunnskaper. Ha MDN Flexbox-dokumentasjonen åpen parallelt for kontekst. I løpet av 2-3 kvelder dekker du hele flexbox-temaet.

Er det noe poeng å gå gjennom spillene for en erfaren utvikler?

Ja, men selektivt. I stedet for Flexbox Froggy (blir kjedelig på de første 15 nivåene) kan du ta Flexbox Defense med en gang, kampstemning og strengere begrensninger. Grid Garden er nyttig selv for dem som skriver grid-template-columns daglig: nivå 25+ med grid-area viser teknikker som sjelden finnes i veiledninger. CSS Diner på nivå 25-32 er den beste testen for kunnskap om pseudoklasser.

Hvorfor spill i stedet for et videokurs eller dokumentasjon?

Spill gir umiddelbar visuell tilbakemelding, du skrev align-items: center og så frosken hoppe til midten med en gang. Dette er den grunnleggende forskjellen fra passiv videotitting: muskelminne dannes fordi du skriver koden selv. I tillegg kommer utfordringselementet: ønsket om å klare neste nivå holder deg engasjert bedre enn noen tidsfrist.

Samsvarer disse spillene med moderne CSS-spesifikasjoner (2026)?

Ja. Flexbox og Grid er modne spesifikasjoner, de grunnleggende egenskapene har ikke endret seg på årevis. Nye funksjoner som align-content i normal flyt (2024) eller if()-betingelser (2025) dekkes ikke i disse spillene, men dette er nisjefunksjoner som ikke trengs i daglig arbeid. For det store flertallet av reelle layouter er det disse spillene lærer deg tilstrekkelig.

Hva bør jeg gjøre hvis et spill ikke fungerer i nettleseren min?

Alle 8 spillene ble testet i Chrome og Firefox, ingen problemer funnet. Hvis et spill ikke laster: sjekk om JavaScript er blokkert (Flexbox Defense og Roadmap krever skript); prøv å åpne i inkognitomodus (utvidelser ødelegger av og til layout). Tic-Tac-Toe og Carnival på CodePen kan kreve at du klikker «Run» for å starte.

Er det verdt å spille CSS-spill i 2026?

Disse 8 spillene er ikke bare underholdning for en kveld. Hvert av dem tetter et spesifikt hull: Flexbox Froggy pluss Flexbox Defense gir full flexbox-dekning fra ulike vinkler, Grid Garden er den mest smertefrie inngangen til CSS Grid, CSS Diner er selektorer uten pugging, og Roadmap, Carnival og Tic-Tac-Toe viser hvor dypt du kan gå med bare CSS.

Hvis du er nybegynner, start med Froggy, deretter Grid Garden, så Diner. Tre kvelder, og du mestrer det meste av det du faktisk trenger i jobbsammenheng. Hvis du er erfaren, hopp over de første 15 nivåene av Froggy, men fullfør definitivt CSS Diner til slutten og undersøk kildekoden til Carnival. Begge deler tar under en time.

Alle 8 spillene er gratis, åpne (unntatt Roadmap, kildekoden er lesbar direkte i DevTools) og fungerer i 2026 uten endringer. Ingen registrering, ingen betalte abonnementer. Åpne det første spillet og skriv CSS.