Lär dig CSS med spel: Flexbox Froggy och Grid Garden

Börja med Flexbox Froggy för att öva på justering längs en axel, använd sedan Grid Garden för att öva på att placera ett objekt mellan rutnätslinjer. Efter varje spelövning, återskapa idén på en liten egen sida. Ett användbart resultat är att kunna förklara varför en deklaration fungerar när layouten ändras, snarare än att komma ihåg svaret på en viss nivå.

Hur man lär sig CSS med spel och sedan tillämpar det

Denna väg kombinerar två spel med tre originella övningar. Den passar någon som kan läsa en enkel CSS-regel och vill ha synlig feedback. Det är inte en komplett webbutvecklingskurs: riktiga gränssnitt behöver också läsbart innehåll, responsivt beteende, tangentbordsåtkomst och testning med olika mängder text.

Välj rätt övning för din fråga

Spelen är från Codepip. Cozcade länkar varje spel till sin matchande guide: Flexbox Froggy och dess guide; Grid Garden och dess guide. De ursprungliga sidorna Froggy och Grid Garden innehåller författarnas egna versioner. Använd ett tangentbord när du följer kodövningarna här.

Namnge först axeln innan du väljer en egenskap

Flexbox har en huvudaxel och en tväraxel. flex-direction anger huvudriktningen; justify-content placerar objekt längs den huvudaxeln, medan align-items avser tväraxeln. I en vanlig vänster-till-höger-rad är huvudaxeln horisontell. Ändra riktningen till en kolumn så blir den vertikal. Dessa definitioner behandlas i MDNs Flexbox-introduktion.

Innan du försöker deklarera i Froggy, ange vilken riktning du vill att objekten ska röra sig. Namnge sedan den riktningen i förhållande till den aktuella huvudaxeln. Detta förvandlar ett fel svar till en specifik fråga: valde du fel egenskap, fel värde eller fel axel?

Övning 1: flytta en grupp till slutet

Skapa tre små föremål inuti en behållare. Detta är en originalövning, inte en kopierad spelnivå eller facit.

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

Ditt mål är att flytta de tre föremålen tillsammans mot den högra kanten utan att ändra deras ordning eller ge varje föremål en separat marginal. Förutspå resultatet och lägg sedan till justify-content: flex-end i behållaren.

Jämför det nu med justify-content: space-between. Det första alternativet flyttar gruppen; det andra fördelar det tillgängliga utrymmet mellan föremålen. Prova en smal och en bred behållare. Förklara vilken version du skulle välja för tre knappar som ska förbli nära varandra. Det synliga resultatet är viktigare än att komma ihåg ett värde.

Övning 2: behåll samma instruktion, ändra axeln

Återanvänd den behållaren, lägg till flex-direction: column, sätt height: 12rem och behåll justify-content: flex-end. Objekten samlas nu mot botten. Din deklaration blev inte ett "flytta åt höger"-kommando: den fungerar fortfarande längs huvudaxeln, som du ändrade.

Lägg sedan till align-items: flex-start. Jämför arrangemanget före och efter den tillägget. Med den angivna vänster-till-höger-riktningen justeras objekten åt vänster på tväraxeln. Ta bort deklarationen och observera standardutsträckningsbeteendet igen.

Skriv en kort förklaring av båda ändringarna utan att använda "det bara fungerar". Identifiera till exempel axeln, det fria utrymmet och gruppen som placeras. Om du inte kan förklara ett resultat, reducera exemplet till två objekt och ändra bara en deklaration åt gången. Detta är vanan att ta med sig tillbaka till spelet.

Skillnaden mellan ett rutnätsspår och dess gränslinjer finns sedan

Rutnätsplacering använder linjer som omger rader och kolumner. Fem explicita kolumner har sex gränslinjer. Ett objekt som placeras från kolumnrad 3 till rad 5 sträcker sig över två kolumner, inte tre. Se MDNs introduktion till rutnät för skillnaden mellan spår, celler och linjer.

I Grid Garden, läs start- och slutgränserna innan du försöker en position. Rita eller märk ut gränserna på din egen sida om det är förvirrande att räkna mellanrummen.

Övning 3: placera ett kort mellan två rader

Bygg en bräda med fem kolumner och ge den 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;
}

Förutsäg var kortet kommer att visas innan du öppnar sidan. Få det sedan att sträcka sig över hela brädet genom att bara ändra dess kolumnplacering. Med de fem explicita kolumnerna ovan sträcker sig grid-column: 1 / 6 från den första gränsen till den sista.

Slutligen, ändra texten till en mycket längre mening och gör webbläsaren smalare. Placeringsregeln kan förbli korrekt medan kortets fasta höjdpresentation blir olämplig för dess innehåll. Att lösa en spelövning lär ut en del av layouten; att bygga en användbar sida kräver att man också kontrollerar innehållet.

Använd spelets framsteg som feedback, inte som bevis på behärskning

Efter en lyckad övning, ändra ett antagande: riktningen, antalet objekt, tillgänglig bredd eller textlängd. Förutsäg resultatet innan du tittar. Om du kan anpassa idén och förklara ändringen har du lärt dig mer än ett nivåsvar.

När du återvänder till ett spel, kontrollera att du öppnar samma version och webbläsarmiljö. Cozcade-kontofavoriter identifierar spel du vill återvända till; de är inte ett löfte om att ett spels interna lektionsförlopp överförs mellan enheter. Undvik att radera lagrade webbplatsdata medan du undersöker förloppet, och använd en explicit exportfunktion endast om det specifika spelet erbjuder en.

Fortsätt med matchningsguiden

Använd Froggy-guiden för övning i axlar och uppriktning och Grid Garden-guiden för placeringsfrågor. Om du vill ha en annan typ av övning efteråt, bläddra bland inlärningsspel.

Övningarna ovan skrevs för den här artikeln. Referenssidorna kontrollerades den 11 oktober 2026. Våra inspelade spelkontroller täcker ett litet antal datorinteraktioner, inte slutförande av alla nivåer eller en fullständig mobilkurs. Den här artikeln lär ut en övningssekvens; den ger inte en kvalifikation eller ersätter testning av dina egna gränssnitt.

Spel du kan spela på Cozcade

Flexbox FroggyGrid Garden