CSS Grid Garden bringt dir spielerisch das CSS Grid bei

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

CSS Grid ist der neue heiße Scheiß im Webdesign. Nachdem jetzt die modernen Browser dieses Set verschiedener CSS-Eigenschaften unterstützen, wird es Zeit, sich damit zu befassen. „CSS Grid Garden” unterstützt dich dabei.

CSS Grid Garden: Wässer deine Karotten

CSS Grid Garden ist ein Onlinespiel aus der digitalen Feder von Thomas Park. Park ist in Entwicklerkreisen nicht zuletzt durch sein Spiel Flexbox Froggy bekannt. Mittels des letzterem brachte er uns die Grundkenntnisse der Verwendung von CSS Flexbox nahe. In „CSS Grid Garden” befasst sich Park mit dem Eigenschaftenpaket des CSS Grid.

CSS Grid Garden: Ein niederschwelliges Einsteigerspiel zu CSS Grid. (Screenshot: Dr. Web)

Natürlich darfst du nicht erwarten, der CSS Grid Zenmeister zu sein, bloß weil du unfallfrei durch das Spiel gekommen bist. Aber für den Einstieg ist der Grid Garden bestens geeignet. Du wirst gar nicht merken, dass du etwas lernst.

Park leitet dich durch 28 Level, in denen du auf unterschiedliche Weise Gartenpflege betreiben musst. Zunächst geht es darum, einzelne Pflanzen, die im Grid angeordnet sind, gezielt mit Wasser, welches sich an einer anderen Stelle im Grid befindet zu versorgen.

Hierzu schreibst du passende CSS-Anweisungen, die dann hoffentlich das gewünschte Ergebnis zeitigen. Park nimmt dich dabei an die Hand und steigert den Schwierigkeitsgrad nur ganz behutsam. Das Ergebnis des von dir eingetippten CSS siehst du direkt im rechts angeordneten Grid. Das Prinzip entspricht exakt jenem des Vorgängers „Flexbox Froggy”.

Flexbox Froggy, Lernspiel zu CSS Flexbox. (Screenshot: Dr. Web)

CSS Grid Garden: Polyglott und quelloffen

„CSS Grid Garden” steht in englischer, spanischer, polnischer, russischer, französischer und portugiesischer Sprache zur Verfügung. Park stellt das Spiel via Github unter der MIT-Lizenz öffentlich bereit, so dass du unkompliziert etwa weitere Übersetzungen hinzufügen könntest. Park selber arbeitet stets an neuen Leveln. Immerhin fehlen dem Spiel bisher noch einige Aspekte des CSS Grid-Konzepts.

In diesem Beitrag stellt Park seinen Ansatz ausführlicher vor.

Wenn du dich bislang noch nicht mit CSS Grid auseinandergesetzt hast, dann ist das Onlinespiel „CSS Grid Garden” der perfekte Einstieg. Dabei lernst du auch gleich die Unterschiede zu Flexbox richtig einschätzen. Gerade um diesen Punkt gibt es offenbar in Entwicklerkreisen noch einige Verwirrung.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Zu guter Letzt sei dir noch dieses Cheatsheet zu CSS Grid empfohlen. Viel Erfolg!

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.