CSS mit Spielen lernen: Flexbox Froggy und Grid Garden

Beginnen Sie mit Flexbox Froggy, um die Ausrichtung entlang einer Achse zu üben, und verwenden Sie anschließend Grid Garden, um das Platzieren eines Elements zwischen Rasterlinien zu trainieren. Nach jeder Übung sollten Sie das jeweilige Konzept auf einer kleinen eigenen Seite umsetzen. Ein nützliches Ergebnis ist, erklären zu können, warum eine Deklaration bei Layoutänderungen funktioniert, anstatt sich die Lösung eines bestimmten Levels zu merken.

So lernen Sie CSS spielerisch und wenden es an

Dieser Kurs kombiniert zwei Spiele mit drei originellen Übungen. Er eignet sich für alle, die einfache CSS-Regeln lesen können und visuelles Feedback wünschen. Es handelt sich nicht um einen vollständigen Webentwicklungskurs: Reale Benutzeroberflächen benötigen auch lesbare Inhalte, responsives Verhalten, Tastaturbedienung und Tests mit unterschiedlichen Textmengen.

Wählen Sie die passende Übung für Ihre Frage

Die Spiele stammen von Codepip. Cozcade verlinkt jedes gehostete Spiel mit der zugehörigen Anleitung: Flexbox Froggy und seine Anleitung; Grid Garden und seine Anleitung. Die Originalseiten Froggy und Grid Garden bieten die Versionen der jeweiligen Autoren. Benutze eine Tastatur, wenn du die Code-Übungen hier durcharbeitest.

Benennen Sie zuerst die Achse, bevor Sie eine Eigenschaft auswählen.

Flexbox hat eine Hauptachse und eine Querachse. flex-direction legt die Hauptrichtung fest; justify-content positioniert Elemente entlang dieser Hauptachse, während align-items die Querachse betrifft. In einer normalen Zeile von links nach rechts verläuft die Hauptachse horizontal. Ändern Sie die Richtung zu einer Spalte, wird sie vertikal. Diese Definitionen werden in MDNs Flexbox-Einführung erläutert.

Bevor Sie Deklarationen in Froggy ausprobieren, geben Sie die Richtung an, in die sich die Elemente bewegen sollen. Benennen Sie diese Richtung dann in Bezug auf die aktuelle Hauptachse. Dadurch wird eine falsche Antwort zu einer konkreten Frage: Haben Sie die falsche Eigenschaft, den falschen Wert oder die falsche Achse gewählt?

Übung 1: Gruppe ans Ende verschieben

Erstelle drei kleine Objekte in einem Container. Dies ist eine Originalübung, kein kopiertes Spiellevel oder Lösungsblatt.

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

Deine Aufgabe ist es, die drei Objekte gemeinsam zum rechten Rand zu verschieben, ohne ihre Reihenfolge zu ändern oder jedem Objekt einen separaten Rand zu geben. Sag das Ergebnis voraus und füge dann justify-content: flex-end zum Container hinzu.

Vergleiche dies nun mit justify-content: space-between. Die erste Option verschiebt die Gruppe; die zweite verteilt den verfügbaren Platz zwischen den Objekten. Probiere es mit einem schmalen und einem breiten Container aus. Erkläre, welche Version du für drei Schaltflächen wählen würdest, die nahe beieinander bleiben sollen. Das sichtbare Ergebnis ist wichtiger als das Merken eines einzelnen Wertes.

Übung 2: Behalten Sie die gleiche Anweisung bei, ändern Sie die Achse.

Verwenden Sie diesen Container wieder, fügen Sie flex-direction: column hinzu, setzen Sie height: 12rem und behalten Sie justify-content: flex-end bei. Die Elemente sammeln sich nun unten. Ihre Deklaration ist nicht zu einem „Nach rechts verschieben“-Befehl geworden: Sie funktioniert weiterhin entlang der Hauptachse, die Sie geändert haben.

Fügen Sie als Nächstes align-items: flex-start hinzu. Vergleichen Sie die Anordnung vor und nach dieser Hinzufügung. Mit der angegebenen Richtung von links nach rechts richten sich die Elemente auf der Querachse nach links aus. Entfernen Sie die Deklaration und beobachten Sie erneut das Standardverhalten der Streckung.

Schreiben Sie eine kurze Erklärung beider Änderungen, ohne die Formulierung „Es funktioniert einfach“ zu verwenden. Geben Sie beispielsweise die Achse, den freien Platz und die positionierte Gruppe an. Wenn Sie ein Ergebnis nicht erklären können, reduzieren Sie das Beispiel auf zwei Elemente und ändern Sie jeweils nur eine Deklaration. Diese Gewohnheit sollten Sie sich für das Spiel merken.

Unterscheiden Sie als Nächstes eine Rasterspur von ihrer Begrenzung.

Beim Platzieren im Raster werden Linien verwendet, die Zeilen und Spalten umgeben. Fünf explizite Spalten haben sechs Begrenzungslinien. Ein Element, das von Spaltenzeile 3 bis Zeile 5 platziert wird, erstreckt sich über zwei Spalten, nicht über drei. Die Unterscheidung zwischen Spuren, Zellen und Linien finden Sie in MDNs Einführung zum Raster.

Lesen Sie in Grid Garden die Start- und Endbegrenzungen, bevor Sie eine Position festlegen. Zeichnen oder beschriften Sie die Begrenzungen auf Ihrer eigenen Seite, falls das Zählen der Felder verwirrend ist.

Übung 3: Platziere eine Karte zwischen zwei Zeilen

Erstelle ein fünfspaltiges Spielfeld und füge ihm eine Karte hinzu:

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

Sage voraus, wo die Karte erscheinen wird, bevor du die Seite öffnest. Vergrößere dann die Spaltenposition der Karte, sodass sie das gesamte Spielfeld ausfüllt. Mit den fünf expliziten Spalten oben reicht grid-column: 1 / 6 von der ersten bis zur letzten Begrenzung.

Ändere abschließend den Text in einen viel längeren Satz und verkleinere die Browserbreite. Die Platzierungsregel bleibt korrekt, während die Darstellung der Karte mit fester Höhe für ihren Inhalt ungeeignet wird. Das Lösen einer Spielübung vermittelt einen Teil des Layouts; für die Erstellung einer nutzbaren Seite muss auch der Inhalt überprüft werden.

Nutze den Spielfortschritt als Feedback, nicht als Beweis für Beherrschung.

Ändere nach einer erfolgreichen Übung eine Annahme: die Richtung, die Anzahl der Elemente, die verfügbare Breite oder die Textlänge. Sagen Sie das Ergebnis voraus, bevor Sie nachsehen. Wenn Sie die Idee anpassen und die Änderung erklären können, haben Sie mehr als nur eine Antwort gelernt.

Überprüfen Sie beim erneuten Öffnen eines Spiels, ob Sie dieselbe Version und Browserumgebung verwenden. Ihre Favoriten im Cozcade-Konto kennzeichnen Spiele, die Sie erneut besuchen möchten. Sie garantieren jedoch nicht, dass der interne Lernfortschritt eines Spiels geräteübergreifend übertragen wird. Vermeiden Sie es, gespeicherte Website-Daten zu löschen, während Sie Ihren Fortschritt überprüfen, und verwenden Sie die Exportfunktion nur, wenn das jeweilige Spiel eine solche Funktion bietet.

Fahren Sie mit der Zuordnungsanleitung fort.

Nutzen Sie die Froggy-Anleitung für Übungen zu Achsen und Ausrichtung und die Grid Garden-Anleitung für Platzierungsfragen. Wenn Sie anschließend eine andere Art von Übung wünschen, stöbern Sie in den Lernspielen.

Die obigen Übungen wurden für diesen Artikel erstellt. Die Referenzseiten wurden am 11. Oktober 2026 überprüft. Unsere aufgezeichneten Gameplay-Tests umfassen nur eine kleine Anzahl von Desktop-Interaktionen und nicht den Abschluss aller Level oder eines kompletten mobilen Kurses. Dieser Artikel vermittelt eine Übungssequenz; er führt nicht zu einer Qualifikation und ersetzt nicht das Testen eigener Benutzeroberflächen.

Spiele, die du auf Cozcade spielen kannst.

Flexbox FroggyGrid Garden