Spielerisch die Verwendung von CSS-Grids lernen

Es ist ein mächtiges Strukturhilfsmittel für Webseiten: CSS-Grids teilen eine Seite in Zeilen und Spalten auf, in denen dann andere Elemente positioniert werden können. Der folgende CSS-Code erzeugt ein Raster von fünf Zeilen und fünf Spalten:

#garden {
  display: grid;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 20% 20% 20% 20% 20%;
}

Mittels grid-column-start und grid-column-end kann man nun auf diesem Gitter andere Elemente platzieren. Die Syntax ist zwar einfach, aber ein paar Seltsamkeiten  muss man erst lernen. 

Dabei hilft die Website Grid Garden. Hier gilt es, Karotten an bestimmten Plätzen zu bewässern und Unkraut mit Gift zu vernichten. Das Spiel ist in 28 kleine Schritte aufgeteilt. In jedem Schritt gilt es, eine neue Aufgabe zu erledigen, die den Garten florieren und die Karotten wachsen lässt. 

Nach den 28 Schritten kennt man die CSS-Befehle: grid-template-rows, grid-template-columns, grid-row-start, grid-row-end, grid-column-start, grid-column-end, order, span, grid-column, grid-row und repeat.