Learning about Grid may be a tough challenge, but luckily there are some great sites out there that can help you on your way.

Grid by Example

This website contains examples including an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code, and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up-to-date Grid Specification. They will not work in IE10 or 11.

Grid Garden

this game, you must water your carrot crops and poison the weeds by mastering CSS grid, a powerful new module that makes 2-dimensional grid layouts a piece of cake. With it you can define columns, rows, and grid template areas.

Different Layouts case studies

Experiments demonstrating CSS Grid, and what's now possible in graphic design on the web.

Griddy.io

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

grid.malven

This cheat sheet is a quick overview of the key features and use cases of Grid Layout. It is not a comprehensive guide to all aspects of Grid Layout, but instead an overview that can help you get started with the new layout system.

A Complete Guide to Grid

comprehensive guide to CSS grid, focusing on all the settings both for the grid parent container and the grid child elements.

Conclusion

If you want to become a master of grid-based design, then check out these helpful resources. They'll provide you with the tips and tricks you need to create layouts that are easy on the eyes, well-organized, and attractive in their simplicity. Hopefully, they'll expand your knowledge of grid layout for the better, and help you on your way to creating beautiful website designs.