Lær CSS med spill: Flexbox Froggy og Grid Garden

Start med Flexbox Froggy for å øve på justering langs en akse, bruk deretter Grid Garden for å øve på å plassere et element mellom rutenettlinjer. Etter hver spilløvelse, gjengi ideen på en liten side. Et nyttig resultat er å kunne forklare hvorfor en deklarasjon fungerer når layouten endres, i stedet for å huske svaret på et bestemt nivå.

Hvordan lære CSS med spill, og deretter bruke det

Denne ruten kombinerer to spill med tre originale øvelser. Den passer for noen som kan lese en enkel CSS-regel og ønsker synlig tilbakemelding. Det er ikke et komplett webutviklingskurs: ekte grensesnitt trenger også lesbart innhold, responsiv oppførsel, tastaturtilgang og testing med forskjellige mengder tekst.

Velg riktig øvelse for spørsmålet ditt

Spillene er laget av Codepip. Cozcade lenker hvert spill til den tilhørende guiden: Flexbox Froggy og guiden; Grid Garden og guiden. De originale sidene Froggy og Grid Garden inneholder forfatternes egne versjoner. Bruk et tastatur når du følger kodeøvelsene her.

Først, navngi aksen før du velger en egenskap

Flexbox har en hovedakse og en tverrakse. flex-direction angir hovedretningen; justify-content plasserer elementer langs hovedaksen, mens align-items angår tverraksen. I en vanlig venstre-til-høyre-rad er hovedaksen horisontal. Endre retningen til en kolonne, og den blir vertikal. Disse definisjonene er dekket i MDNs Flexbox-introduksjon.

Før du prøver deklarasjoner i Froggy, si hvilken retning du vil at elementene skal bevege seg. Navngi deretter den retningen i forhold til gjeldende hovedakse. Dette gjør et feil svar om til et spesifikt spørsmål: valgte du feil egenskap, feil verdi eller feil akse?

Øvelse 1: flytt en gruppe til slutten

Lag tre små elementer i en beholder. Dette er en original øvelse, ikke et kopiert spillnivå eller en svarnøkkel.

<div class="practice-row">
  <span>A</span><span>B</span><span>C</span>
</div>

.practice-row {
  display: flex;
  gap: 0.5rem;
  min-height: 8rem;
  padding: 1rem;
  border: 2px solid;
  direction: ltr;
}

Målet ditt er å flytte de tre elementene sammen mot høyre kant uten å endre rekkefølgen eller gi hvert element en separat margin. Forutsi resultatet, og legg deretter justify-content: flex-end til beholderen.

Sammenlign det nå med justify-content: space-between. Det første valget flytter gruppen; det andre fordeler den tilgjengelige plassen mellom elementene. Prøv en smal og en bred beholder. Forklar hvilken versjon du ville valgt for tre knapper som skal forbli tett sammen. Det synlige resultatet er viktigere enn å huske én verdi.

Øvelse 2: behold samme instruksjon, endre aksen

Bruk den beholderen på nytt, legg til flex-direction: column, sett height: 12rem, og behold justify-content: flex-end. Elementene samles nå mot bunnen. Deklarasjonen din ble ikke en "flytt til høyre"-kommando: den fungerer fortsatt langs hovedaksen, som du endret.

Deretter legger du til align-items: flex-start. Sammenlign arrangementet før og etter den tillegget. Med den angitte venstre-til-høyre-retningen justeres elementene mot venstre på tverraksen. Fjern deklarasjonen og observer standard strekk-atferd igjen.

Skriv en kort forklaring av begge endringene uten å bruke "det bare fungerer". Identifiser for eksempel aksen, det ledige rommet og gruppen som plasseres. Hvis du ikke kan forklare et resultat, reduser eksemplet til to elementer og endre bare én deklarasjon om gangen. Dette er vanen å ta med seg tilbake i spillet.

Deretter, skille et rutenettspor fra dets grense

Rutenettplassering bruker linjer som omgir rader og kolonner. Fem eksplisitte kolonner har seks grenselinjer. Et element plassert fra kolonnelinje 3 til linje 5 strekker seg over to kolonner, ikke tre. Se MDNs rutenettinnføring for forskjellen mellom spor, celler og linjer.

I Grid Garden, les start- og sluttgrensene før du prøver en posisjon. Tegn eller merk grensene på din egen side hvis det er forvirrende å telle mellomrommene.

Øvelse 3: plasser et kort mellom to linjer

Bygg et brett med fem kolonner og gi det ett kort:

<div class="practice-grid">
  <div class="practice-card">Two-column card</div>
</div>

.practice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, 4rem);
  gap: 0.5rem;
  direction: ltr;
}

.practice-card {
  grid-column: 3 / 5;
  grid-row: 2;
  background: #d9ceff;
  color: #201538;
}

Forutsi hvor kortet vil vises før du åpner siden. Gjør det deretter over hele brettet ved å bare endre kolonneplasseringen. Med de fem eksplisitte kolonnene ovenfor, når grid-column: 1 / 6 fra den første grensen til den siste.

Til slutt, endre teksten til en mye lengre setning og gjør nettleseren smalere. Plasseringsregelen kan forbli korrekt mens kortets faste høydepresentasjon blir uegnet for innholdet. Å løse en spilløvelse lærer én del av layout; å bygge en brukbar side krever også at innholdet kontrolleres.

Bruk spillfremdriften som tilbakemelding, ikke som bevis på mestring

Etter en vellykket øvelse, endre én antagelse: retningen, antall elementer, tilgjengelig bredde eller tekstlengde. Forutsi resultatet før du ser. Hvis du kan tilpasse ideen og forklare endringen, har du lært mer enn et nivåsvar.

Når du går tilbake til et spill, må du sjekke at du åpner samme versjon og nettlesermiljø. Cozcade-kontofavoritter identifiserer spill du vil se på nytt; de er ikke et løfte om at et spills interne leksjonsfremdrift overføres mellom enheter. Unngå å slette lagrede nettstedsdata mens du undersøker fremdriften, og bruk en eksplisitt eksportfunksjon bare hvis det aktuelle spillet tilbyr en.

Fortsett med samsvarsguiden

Bruk Froggy-guiden for øvelse i akser og justering og Grid Garden-guiden for plasseringsspørsmål. Hvis du ønsker en annen type øvelse etterpå, kan du bla gjennom læringsspill.

Øvelsene ovenfor ble skrevet for denne artikkelen. Referansesidene ble sjekket 11. oktober 2026. Våre innspilte spillkontroller dekker et lite antall datamaskininteraksjoner, ikke fullføring av alle nivåer eller et fullstendig mobilkurs. Denne artikkelen lærer en øvingssekvens; den gir ikke en kvalifikasjon eller erstatter testing av dine egne grensesnitt.

Spill du kan spille på Cozcade

Flexbox FroggyGrid Garden