CSS Grid Garden
cssgridgarden.com
A free browser game that teaches CSS Grid layout by having you write real grid properties to water garden plots — covering grid-column, grid-row, grid-area, and grid-template across 28 levels.
Why it is useful
The CSS Grid counterpart to Flexbox Froggy. Grid is harder to internalize than Flexbox because of the two-dimensional coordinate system — the game makes the placement logic intuitive by making it visual and immediate. After completing it you can write grid layouts without reaching for a reference. The game covers the full CSS Grid specification, not just the basics.