Leer CSS met spelletjes: Flexbox Froggy en Grid Garden

Begin met Flexbox Froggy om het uitlijnen langs een as te oefenen, gebruik vervolgens Grid Garden om te oefenen met het plaatsen van een item tussen rasterlijnen. Reproduceer na elke speloefening het idee op een kleine pagina naar eigen inzicht. Een nuttig resultaat is dat je kunt uitleggen waarom een ​​declaratie werkt wanneer de lay-out verandert, in plaats van alleen het antwoord van een specifiek level te onthouden.

Hoe je CSS leert met spelletjes en het vervolgens toepast

Deze route combineert twee spelletjes met drie originele oefeningen. Het is geschikt voor iemand die een eenvoudige CSS-regel kan lezen en visuele feedback wil. Het is geen complete webdevelopmentcursus: echte interfaces hebben ook leesbare content, responsief gedrag, toetsenbordtoegang en testmogelijkheden met verschillende hoeveelheden tekst nodig.

Kies de juiste oefening voor uw vraag

De spellen zijn van Codepip. Cozcade linkt elk gehost spel naar de bijbehorende handleiding: Flexbox Froggy en de handleiding; Grid Garden en de handleiding. De originele Froggy en Grid Garden pagina's bevatten de eigen versies van de auteurs. Gebruik een toetsenbord bij het volgen van de code-oefeningen.

Benoem eerst de as voordat u een eigenschap kiest.

Flexbox heeft een hoofdas en een dwarsas. flex-direction stelt de hoofdrichting in; justify-content positioneert items langs die hoofdas, terwijl align-items betrekking heeft op de dwarsas. In een normale rij van links naar rechts is de hoofdas horizontaal. Verander de richting naar een kolom en deze wordt verticaal. Deze definities worden behandeld in de Flexbox-introductie van MDN.

Voordat u declaraties in Froggy probeert, geef aan in welke richting u de items wilt verplaatsen. Benoem die richting vervolgens ten opzichte van de huidige hoofdas. Dit maakt van een fout antwoord een specifieke vraag: hebt u de verkeerde eigenschap, de verkeerde waarde of de verkeerde as gekozen?

Oefening 1: verplaats een groep naar het einde

Maak drie kleine objecten in een container. Dit is een originele oefening, geen gekopieerd spelniveau of antwoordsleutel.

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

Je doel is om de drie objecten samen naar de rechterrand te verplaatsen zonder hun volgorde te veranderen of elk object een aparte marge te geven. Voorspel het resultaat en voeg vervolgens justify-content: flex-end toe aan de container.

Vergelijk dit nu met justify-content: space-between. De eerste optie verplaatst de groep; de tweede verdeelt de beschikbare ruimte tussen de objecten. Probeer een smalle en een brede container. Leg uit welke versie je zou kiezen voor drie knoppen die dicht bij elkaar moeten blijven. Het zichtbare resultaat is belangrijker dan het onthouden van één waarde.

Oefening 2: behoud dezelfde instructie, verander de as

Hergebruik die container, voeg flex-direction: column toe, stel height: 12rem in en behoud justify-content: flex-end. De items verzamelen zich nu naar beneden. Uw declaratie is geen "naar rechts verplaatsen"-opdracht geworden: het werkt nog steeds langs de hoofdas, die u hebt gewijzigd.

Voeg vervolgens align-items: flex-start toe. Vergelijk de opstelling voor en na deze toevoeging. Met de opgegeven richting van links naar rechts lijnen de items zich uit naar links op de dwarsas. Verwijder de declaratie en observeer opnieuw het standaard rekgedrag.

Schrijf een korte uitleg van beide wijzigingen zonder "het werkt gewoon" te gebruiken. Identificeer bijvoorbeeld de as, de vrije ruimte en de groep die wordt gepositioneerd. Als u een resultaat niet kunt verklaren, beperk het voorbeeld dan tot twee items en wijzig slechts één declaratie tegelijk. Dit is de gewoonte die je weer in het spel moet toepassen.

Onderscheid vervolgens een rasterbaan van de begrenzing ervan.

Bij rasterplaatsing worden lijnen gebruikt die rijen en kolommen omringen. Vijf expliciete kolommen hebben zes begrenzingslijnen. Een item dat van kolomlijn 3 tot lijn 5 wordt geplaatst, beslaat twee kolommen, niet drie. Zie MDN's Rasterintroductie voor het onderscheid tussen banen, cellen en lijnen.

Lees in Grid Garden de begin- en eindbegrenzingen voordat je een positie probeert. Teken of label de begrenzingen op je eigen pagina als het tellen van de ruimtes verwarrend is.

Oefening 3: plaats een kaart tussen twee regels

Bouw een bord met vijf kolommen en geef het één kaart:

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

Voorspel waar de kaart zal verschijnen voordat je de pagina opent. Zorg er vervolgens voor dat de kaart het hele bord beslaat door alleen de kolomplaatsing te wijzigen. Met de vijf expliciete kolommen hierboven reikt grid-column: 1 / 6 van de eerste tot de laatste rand.

Verander ten slotte de tekst in een veel langere zin en maak de browser smaller. De plaatsingsregel kan correct blijven, terwijl de presentatie van de kaart met vaste hoogte ongeschikt wordt voor de inhoud. Het oplossen van een speloefening leert één onderdeel van de lay-out; het bouwen van een bruikbare pagina vereist ook controle van de inhoud.

Gebruik de voortgang van het spel als feedback, niet als bewijs van beheersing

Verander na een succesvolle oefening één aanname: de richting, het aantal items, de beschikbare breedte of de tekstlengte. Voorspel het resultaat voordat je kijkt. Als je het idee kunt aanpassen en de verandering kunt uitleggen, heb je meer geleerd dan alleen een antwoord op een niveau.

Controleer bij het terugkeren naar een spel of je dezelfde versie en browseromgeving opent. Accountfavorieten (Cozcade) geven aan welke spellen je opnieuw wilt spelen; ze garanderen niet dat de interne voortgang van een spel tussen apparaten wordt overgezet. Verwijder geen opgeslagen sitegegevens tijdens het bekijken van je voortgang en gebruik een expliciete exportfunctie alleen als het betreffende spel die biedt.

Ga verder met de matchinggids

Gebruik de Froggy-gids voor oefeningen met assen en uitlijning en de Grid Garden-gids voor plaatsingsvragen. Als je daarna nog een ander soort oefening wilt, blader dan door de leerspellen.

De bovenstaande oefeningen zijn geschreven voor dit artikel. De referentiepagina's zijn gecontroleerd op 11 oktober 2026. Onze opgenomen gameplay-tests omvatten een klein aantal interacties op de desktop, niet het voltooien van alle levels of een volledige mobiele cursus. Dit artikel leert een oefenreeks; het levert geen kwalificatie op en vervangt het testen van je eigen interfaces niet.

Spellen die je kunt spelen op Cozcade

Flexbox FroggyGrid Garden