Grid Garden: ein Spiel, um CSS Grids zu lernen

Zwei Fund­stü­cke im WWW: Spiele, um CSS Grids und CSS Flex­box zu ler­nen und sich darin auszuprobieren. 

Grid Garden: ein Spiel, um CSS Grids zu lernen

Cas­ca­ding Style Sheets (eng­lisch für „gestufte Gestal­tungs­bö­gen“, kurz CSS) sind ein wich­ti­ges Mit­tel, um Gestal­tungs­an­wei­sun­gen für Web­sites zu erstel­len. CSS wurde ent­wi­ckelt, um Dar­stel­lungs­vor­ga­ben weit­ge­hend von den Inhal­ten zu tren­nen. So wer­den etwa Lay­out, Far­ben und Typo­gra­fie uvm. in einer sepa­ra­ten Datei gespei­chert. Gab es anfangs nur ein­fa­che Dar­stel­lungs­an­wei­sun­gen, so wur­den im Lauf der Zeit kom­ple­xere Module hin­zu­ge­fügt, mit denen z. B. Ani­ma­tio­nen und für ver­schie­dene Aus­ga­be­me­dien ver­schie­dene Dar­stel­lun­gen defi­niert wer­den können.

Inzwi­schen gibt es neben den soge­nann­ten „Flex­bo­xen“ (CSS Flex­box) auch das CSS Grid Lay­out, mit dem sich als Gestal­tungs­ras­ter so etwas wie der Satz­spie­gel für Web­sites erstel­len lässt.

Mit dem Spiel Grid Gar­den kann man den Umgang mit CSS Grids ler­nen. Das Spiel mit zu wäs­sern­den Karot­ten in einem Gar­ten fängt ein­fach ein, aber gegen Ende wird es durch­aus schwie­rig. Der Autor die­ses Bei­trags schei­terte am Level 20 of 28 (die­ses und das nächst­ge­nannte Spiel sind in Eng­lisch und beide Ver­weise öffe­nen in neuen Fens­tern!) und den folgenden.

Mit dem ähn­li­chen Spiel Flex­box Froggy kann man anhand von Frö­schen und mit­tels CSS Flex­box ler­nen, wie ein fle­xi­bles Lay­out funktioniert.

Viel Spaß!