CSS Grid mit einem virtuellen Gartenspiel lernen

• Grid Garden ist ein spielerisches Lernwerkzeug, bei dem man CSS-Code schreibt, um einen Karottengarten zu bewässern, und so CSS-Grid-Layouts Schritt für Schritt übt
• In der ersten Stufe wird über die Eigenschaft grid-column-start die Startspalte festgelegt, damit nur der Bereich mit den Karotten bewässert wird
• grid-column-start: 3; lässt den zu bewässernden Bereich an der dritten vertikalen Grid-Linie von links beginnen
• Der Beispielgarten ist ein 5x5-Grid, das mit display: grid sowie grid-template-columns und grid-template-rows aufgebaut ist, wobei jede Zeile und Spalte 20 % einnimmt
• Insgesamt gibt es 28 Level; wer weiter CSS lernen möchte, kann mit Flexbox Froggy und Anchoreum weitermachen

---

CSS Grid über Spielregeln lernen

• Grid Garden ist ein Spiel, bei dem man durch Eingabe von CSS-Code einen Karottengarten wachsen lässt
• Die Spieler passen CSS-Grid-Eigenschaften so an, dass nur die Bereiche mit Karotten bewässert werden
• Im ersten Level wird mit grid-column-start die Spaltenposition festgelegt, an der das Wasser beginnt

Erstes Level: grid-column-start und der 5x5-Garten

• grid-column-start: 3; startet den zu bewässernden Bereich an der dritten vertikalen Begrenzungslinie des Grids von links
• #garden im Beispielcode ist als CSS-Grid-Container eingerichtet
  • display: grid;
  • grid-template-columns: 20% 20% 20% 20% 20%;
  • grid-template-rows: 20% 20% 20% 20% 20%;
• Diese Einstellung erzeugt ein 5x5-Grid, bei dem Spalten und Zeilen jeweils in 20-%-Abschnitte aufgeteilt sind

Level-Struktur und weitere Spiele

• Auf dem Bildschirm wird Level 1 von insgesamt 28 Leveln angezeigt
• Als weitere Spiele zum Lernen von CSS werden Flexbox Froggy und Anchoreum empfohlen

[GN⁺]

Meinungen auf Hacker News

• Diese Reihe von Rachel Andrews fand ich schon immer ausgezeichnetes Lernmaterial: https://www.smashingmagazine.com/2020/01/understanding-css-g...
  Selbst als Backend-Entwickler hat sie mir eine solide Grundlage gegeben, um moderne UI-Apps leichtgewichtig und einfach zu bauen.
  Weder Bootstrap noch Tailwind waren nötig.

  • Bootstrap abstrahiert CSS, sodass man einfache Dinge auch ohne große CSS-Kenntnisse hinbekommt, Tailwind dagegen ist eher tokenisiertes CSS.
    Ohne CSS-Kenntnisse kann man Tailwind nicht verwenden, und beim Verwenden lernt man CSS.
    Deshalb wirkt es auf mich eher ziemlich leichtgewichtig und einfach.
  • Ebenfalls empfehlenswert ist Jen Simmons’ Videoreihe Layout Land: https://www.youtube.com/layoutland
  • Bootstrap ist ursprünglich eher dafür gedacht, wenn man sich nicht mit CSS Grid oder Flexbox beschäftigen möchte.
    Tailwind nimmt einem diesen Teil dagegen nicht ab.
    Wenn man Grid oder Flexbox nicht kennt, kann Tailwind genauso mühsam sein wie reines CSS.

• Dieses Spiel ist ziemlich gut und macht Spaß, aber die Versuchung ist groß, einfach mit Werten herumzuprobieren und nur das aktuelle Problem zu lösen, statt sich darauf zu konzentrieren, „wie es wirklich funktioniert“.
  Um zu einem tieferen Verständnis zu führen, könnte man mehr Freiheit beim Lösen der Aufgaben geben, aber nach mehr als 2–3 Versuchen eine kleine Strafe einbauen.

  • Aus Sicht jemandes, der Frontend-Code schreibt, ist gerade CSS immer Trial-and-Error und, wie gesagt, oft nahe an Brute Force.
    Es gibt Momente, in denen man ähnliche Probleme abklopft, das Gelernte anwendet und so lange herumdreht, bis es funktioniert.
  • Ein Problem mangelnder Selbstdisziplin kann man nicht dem Spiel anlasten.

• Ein paar vermischte Notizen:

  1. Gut: Antworten werden über die absolute Position geprüft.
     Deshalb kann man ein Level bestehen, wenn die Antwort gültig ist, sogar mit Ansätzen, die gar kein Grid verwenden.
  2. Schlecht: Bei jedem Versuch wird Google Analytics gesendet.
  • Zu Punkt 1 sind wir uns vermutlich alle einig, dass die robuste Lösung für die erste Aufgabe position: relative; left: 31.4em; ist.

• Bei einer früheren Arbeitsstelle haben wir jede Woche etwa 30 Minuten Show-and-Tell im Team gemacht, und in einer Woche habe ich das mitgebracht und Leute, die nicht programmieren, Lösungen ausprobieren lassen.
  Es war interessant zu sehen, wie weit sie kamen; manche verstanden es sofort, andere taten sich ziemlich schwer.
  Insgesamt kam es gut an, und ich halte es für eine gute Methode, Menschen, die wohl nie in ihrem Leben programmieren werden, ein grundlegendes Gefühl fürs Programmieren zu vermitteln.
  Noch Jahre später sagten Kollegen manchmal Dinge wie: „Ist das das, was du den ganzen Tag machst?“; lustig war, dass sie mich dafür wie einen Zauberer sahen, obwohl es der einfachste Teil meiner Arbeit ist.
  Trotzdem fand ich es schön, dass sie durch das kleine eigene Ausprobieren meine Arbeit mehr zu respektieren schienen.

• Ich dachte, Flexbox hätte CSS grundlegend verändert, dann kam Grid, und es war wirklich erstaunlich und vorhersehbar.
  Der verbleibende Schmerz in CSS sind jetzt solche merkwürdigen Fälle wie: „Eine Komponente soll den übrigen Platz einnehmen, den ihre Geschwister nicht nutzen, und eines ihrer Kinder soll wiederum alles einnehmen, was dessen Geschwister nicht nutzen, aber bei Platzmangel zu Scroll-Overflow werden.“
  Es gibt mehrere Fälle mit seltsamen Wechselwirkungen zwischen Flexbox und Grid und verwickelten Prioritäten bei der Größenberechnung im Layout, die ich noch nicht vollständig verstehe.
  Meist liegt es vielleicht an mir, aber im Gegensatz zu Flexbox oder Grid selbst fühlt sich das immer noch nicht intuitiv an.

• Ich dachte kurz, es gehe um https://csszengarden.com/pages/about/.
  Vor langer Zeit war das eine erstaunliche Ressource, um CSS zu lernen und Design-Inspiration zu bekommen.

  • Diese Zeit sehe ich immer noch als goldenes Zeitalter der Webentwicklung.
    Damals begannen die Früchte der Web-Standards-Bewegung sichtbar zu werden.
    Leider kam danach React, und die guten Dinge wurden aus dem Fenster geworfen.
    Tag-Suppe scheint wohl genießbar zu werden, wenn sie nur tief genug in node_modules vergraben ist.

• Ein paar ältere große Diskussionen:
  2019: https://news.ycombinator.com/item?id=21050501
  2018: https://news.ycombinator.com/item?id=18753358
  2017: https://news.ycombinator.com/item?id=14041367

• Dieses Spiel und Flexbox Froggy eignen sich gut für einen unterhaltsamen Einstieg in CSS-Layouts.

  • Die Website verlinkt zwar auf Flexbox Froggy, führt aber über einen Link, der eine Konto-Registrierung erfordert.
    Direkt erreicht man es unter https://flexboxfroggy.com/.

• Ich hatte gehofft, es würde mir helfen, eine gute Lösung für ein kleines, simples Web-Frontend-Problem zu finden, an dem ich arbeite.
  Aber nachdem ich die ersten 10 Level gespielt hatte, mochte ich CSS noch weniger.

• Ich mag CSS Grid nicht, weil es der semantischen Struktur von HTML fast alles nimmt.
  Bei Flexbox entspricht der HTML-Baum immerhin noch einer gewissen Seitenstruktur, aber mit CSS Grid sieht es am Ende so aus:
  <-! random amount of divs without classnames -->
  Um zu verstehen, was auf der Seite passiert, muss man es dann plötzlich mit dem CSS abgleichen.
  Sehr effektiv, aber unschön.

  • Das ist zwar ein anderes Thema, könnte sich aber lösen lassen, wenn es eine IDE gäbe, mit der man die Beziehungen zwischen HTML und CSS visuell bearbeiten kann, ohne alle Zusammenhänge zu verstehen und Symbole manuell abzugleichen.