Grid Garden
Learn CSS grid layout by tending a virtual garden.
Community find. Not personally tested by Ash.
Open official siteWhat it does
Grid Garden teaches CSS grid by asking you to place water and other elements on a garden. It makes row and column placement visible while you write CSS.
When to use it
You want to practice layouts where rows and columns need to work together.
What you need: A browser and, for the follow-up exercise, a page where you can edit CSS.
Try a small build
A suggested exercise to help you evaluate the resource.
- Play the first levels and describe the difference between a grid line and the space between two lines.
- Build a small page with a main article and a related-content column using CSS grid.
- Collapse the layout to one column on a narrow screen. Check that the reading order remains sensible.
You should end up with: A two-dimensional layout that adapts to a phone without changing its content order.
Keep in mind
Visual placement can differ from document order. Keep the source order meaningful for keyboard and assistive-technology users.
Go to the source
Follow the official instructions for current setup steps and supported features.