Grid Garden is a fun interactive learning game like Flexbox Froggy that teaches the CSS property grid. At the start of each concept it gives an explanation of how each property works. It starts with simpler concepts and works on up to the more difficult ones. It makes learning the css property fun and more enjoyable than just reading word for word from a book.
Grid Critters is a game website that teaches css grid as you play a game. The game isn't free, so I wasn't able to try it out, but I did read the content on the page to see what its all about. There are 10 chapters that get more difficult as you go. The whole time you are playing, you are coding! As you go you are mastering the concepts of grid!
Coding Fantasy is another website that teaches the concept of grid through playing a game. There are 80 levels to the grid game and it teaches different concepts we didn't learn in class, like writing out (grid-template-column: 50% 50%) to split the columns in half. The games on Coding Fantasy are free to play as long as you sign up for an account. I also found a Flexbox game to play on the website.
All 3 websites are great tools to learn css grid and make it fun and easy to learn. I find it much more enjoyable to play the game and read about the concepts through the game than reading in a book. Being able to try it out and immediately see how it works helps out the most. I would recommend all of these resources to anyone that wants to learn about responsive design.