Learn CSS Grid with a virtual garden game
cssgridgarden.com
Learn CSS Grid with a virtual garden game
1–10 of 63 posts
Re: Learn CSS Grid with a virtual garden game
#2While this game is quite nice and fun to play, I find it kind of tempting to just experiment with the values until you solve the current problem instead of focussing on the "How does it really work" aspect of the problem, which would lead to a deeper understanding...
One way to solve this could be to allow more freedom in solving the problem as well as a small penalty on more than 2 or 3 tries.
Re: Learn CSS Grid with a virtual garden game
#3Some random note:
1. Good: The answer is verified by checking the absolute position. You can pass the level with any valid answer -- including non-grid variant.
2. Ugly: It send google analytics for every attempt.
Re: Learn CSS Grid with a virtual garden game
#4Pretty fun! I got stuck at level 26, my solution looks visually correct but the next button won't activate:
grid-template-rows: repeat(4, 10px) 1fr;Re: Learn CSS Grid with a virtual garden game
#5Some of the bigger previous discussions:
2019:
https://news.ycombinator.com/item?id=21050501
2018:
https://news.ycombinator.com/item?id=18753358
2017:
Re: Learn CSS Grid with a virtual garden game
#6Pretty fun! I got stuck at level 26, my solution looks visually correct but the next button won't activate: grid-template-rows: repeat(4, 10px) 1fr;
You are watering everything except for top 40 pixels. You need to water everything except for top 50 pixels.
Re: Learn CSS Grid with a virtual garden game
#7Pretty fun! I got stuck at level 26, my solution looks visually correct but the next button won't activate: grid-template-rows: repeat(4, 10px) 1fr;
grid-template-columns: 50px repeat(3, 1fr) 50px;
Re: Learn CSS Grid with a virtual garden game
#8I enjoyed it, good refresher on CSS grids, thanks for sharing
Re: Learn CSS Grid with a virtual garden game
#9Pretty fun! I got stuck at level 26, my solution looks visually correct but the next button won't activate: grid-template-rows: repeat(4, 10px) 1fr;
You are watering everything except for top 40 pixels. You need to water everything except for top 50 pixels.
Gone are the beautiful days of layouts.
Re: Learn CSS Grid with a virtual garden game
#10This and flexbox froggy are great to dive into css layouts in a fun way.