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

Start med Flexbox Froggy for at øve justering langs en akse, brug derefter Grid Garden til at øve dig i at placere et element mellem gitterlinjer. Efter hver spiløvelse skal du gengive ideen på din egen lille side. Et nyttigt resultat er at kunne forklare, hvorfor en deklaration fungerer, når layoutet ændres, i stedet for at huske et bestemt niveaus svar.

Sådan lærer du CSS med spil og anvender det derefter

Denne rute kombinerer to spil med tre originale øvelser. Den passer til en person, der kan læse en simpel CSS-regel og ønsker synlig feedback. Det er ikke et komplet webudviklingskursus: rigtige grænseflader kræver også læsbart indhold, responsiv adfærd, tastaturadgang og testning med forskellige mængder tekst.

Vælg den rigtige øvelse til dit spørgsmål

Spillene er fra Codepip. Cozcade linker hvert hostede spil til dets matchende guide: Flexbox Froggy og dets guide; Grid Garden og dets guide. De originale Froggy og Grid Garden sider indeholder forfatternes egne versioner. Brug et tastatur, når du følger kodeøvelserne her.

Navngiv først aksen, før du vælger en egenskab

Flexbox har en hovedakse og en tværakse. flex-direction angiver hovedretningen; justify-content placerer elementer langs den hovedakse, mens align-items vedrører tværaksen. I en normal venstre-mod-højre række er hovedaksen vandret. Ændr retningen til en kolonne, og den bliver lodret. Disse definitioner er dækket i MDNs Flexbox-introduktion.

Før du prøver deklarationer i Froggy, skal du angive, hvilken retning du vil have elementerne til at bevæge sig. Navngiv derefter den retning i forhold til den aktuelle hovedakse. Dette forvandler et forkert svar til et specifikt spørgsmål: valgte du den forkerte egenskab, den forkerte værdi eller den forkerte akse?

Øvelse 1: Flyt en gruppe til enden

Lav tre små elementer i en beholder. Dette er en original øvelse, ikke et kopieret spilniveau eller en svarnøgle.

<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;
}

Dit mål er at flytte de tre elementer sammen mod højre kant uden at ændre deres rækkefølge eller give hver element en separat margen. Forudsig resultatet, og tilføj derefter justify-content: flex-end til beholderen.

Sammenlign det nu med justify-content: space-between. Det første valg flytter gruppen; det andet fordeler den tilgængelige plads mellem elementerne. Prøv en smal og en bred beholder. Forklar hvilken version du ville vælge for tre knapper, der skal forblive tæt på hinanden. Det synlige resultat er vigtigere end at huske én værdi.

Øvelse 2: behold den samme instruktion, skift aksen

Genbrug den container, tilføj flex-direction: column, indstil height: 12rem, og behold justify-content: flex-end. Elementerne samles nu mod bunden. Din deklaration blev ikke til en "flyt til højre"-kommando: den fungerer stadig langs hovedaksen, som du ændrede.

Tilføj derefter align-items: flex-start. Sammenlign arrangementet før og efter den tilføjelse. Med den angivne venstre-mod-højre-retning justeres elementerne mod venstre på tværaksen. Fjern deklarationen, og observer standardstrækningsadfærden igen.

Skriv en kort forklaring af begge ændringer uden at bruge "det virker bare". Identificér f.eks. aksen, det frie rum og den gruppe, der placeres. Hvis du ikke kan forklare et resultat, reducer eksemplet til to elementer og ændr kun én deklaration ad gangen. Dette er vanen at tage med tilbage i spillet.

Dernæst skal du skelne mellem et gitterspor og dets grænser.

Gitterplacering bruger linjer, der omgiver rækker og kolonner. Fem eksplicitte kolonner har seks grænselinjer. Et element placeret fra kolonne linje 3 til linje 5 spænder over to kolonner, ikke tre. Se MDN's gitterintroduktion for at se forskellen mellem spor, celler og linjer.

I Grid Garden skal du læse start- og slutgrænserne, før du prøver en position. Tegn eller mærk grænserne på din egen side, hvis det er forvirrende at tælle mellemrummene.

Øvelse 3: Placer et kort mellem to linjer

Byg et bræt med fem kolonner og giv det ét 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;
}

Forudsig, hvor kortet vil vises, før du åbner siden. Få det derefter til at strække sig over hele brættet ved kun at ændre dets kolonneplacering. Med de fem eksplicitte kolonner ovenfor strækker grid-column: 1 / 6 sig fra den første grænse til den sidste.

Til sidst skal du ændre teksten til en meget længere sætning og gøre browseren smallere. Placeringsreglen kan forblive korrekt, mens kortets faste højdepræsentation bliver uegnet til dets indhold. At løse en spiløvelse lærer én del af layoutet; at bygge en brugbar side kræver også kontrol af indholdet.

Brug spillets fremskridt som feedback, ikke som bevis på mestring

Efter en vellykket øvelse skal du ændre én antagelse: retningen, antallet af elementer, tilgængelig bredde eller tekstlængde. Forudsig resultatet, før du kigger. Hvis du kan tilpasse ideen og forklare ændringen, har du lært mere end et niveausvar.

Når du vender tilbage til et spil, skal du kontrollere, at du åbner den samme version og browsermiljø. Cozcade-kontofavoritter identificerer spil, du vil gense; de ​​er ikke et løfte om, at et spils interne lektionsfremskridt overføres mellem enheder. Undgå at slette gemte webstedsdata, mens du undersøger fremskridt, og brug kun en eksplicit eksportfunktion, hvis det pågældende spil tilbyder en.

Fortsæt med matchningsguiden

Brug Froggy-guiden til øvelse i akser og justering og Grid Garden-guiden til placeringsspørgsmål. Hvis du ønsker en anden type øvelse bagefter, kan du gennemse læringsspil.

Øvelserne ovenfor blev skrevet til denne artikel. Referencesiderne blev kontrolleret den 11. oktober 2026. Vores optagede gameplay-tjek dækker et lille antal desktop-interaktioner, ikke gennemførelse af alle niveauer eller et fuldt mobilkursus. Denne artikel lærer en øvelsessekvens; den tildeler ikke en kvalifikation eller erstatter test af dine egne grænseflader.

Spil du kan spille på Cozcade

Flexbox FroggyGrid Garden