Das Lernspiel CSS Grid Garden vermittelt die Grundlagen des CSS-Grid-Layouts über eine Reihe interaktiver Aufgaben. Die Projektseite stammt von Thomas Park und stellt den vollständigen Quelltext auf GitHub bereit.
Spieler positionieren in jeder Aufgabe virtuelle Möhren und lernen dabei Eigenschaften wie grid-column-start, grid-column-end und grid-template-columns kennen. Der Browser zeigt die Auswirkungen direkt an, sodass sich die Beziehung zwischen CSS-Regel und Layout ohne zusätzlichen Build-Schritt untersuchen lässt.
Vom einfachen Raster zu komplexeren Aufgaben
Die ersten Level führen schrittweise in die Syntax ein. Später kombiniert Grid Garden mehrere Eigenschaften und verlangt ein genaueres Verständnis von Zeilen, Spalten und Bereichen. Damit eignet sich das Format als kompakte Einführung für Webentwickler, die interaktive Oberflächen oder browserbasierte Spiele prototypisch umsetzen.
Offener Quelltext für eigene Lernbeispiele
Das Repository dokumentiert die Umsetzung eines spielerischen Coding-Tutorials mit HTML, CSS und JavaScript. Für technische Teams ist der Ansatz auch als Vorlage interessant, um API- oder Layoutwissen in interaktiven Übungen zu vermitteln, statt ausschließlich statische Dokumentation bereitzustellen.