This site is a wonderful visual display of how to use flex. And it's a whole site dedicated just to CSS Grid layout! They step through each aspect of the grid layout, showing visually how each basic property of the grid will affect how it behaves. It also showed some great examples of labeling grid areas. There was a lot of advanced grid uses. I think it will take a few times going over this site to really understand all of the options they present. Definitely saving this as a reference!
What a great site - there's not a lot of learning tools on this site, but it allows you to click and drag to design out your desired grid layout. Then with a click of a button, it creates the needed CSS code to create it! You can also change the fr on the rows & columns. While this page doesn't have specific "learn to code grid" instructions, simply playing with some of the features and looking at the code help to learn how CSS grid works.
This site offers a free CSS grid course with 25 different videos about Grid design. You do have to sign up for it, but the videos are completely free. It goes through all of the aspects of creating and customizing a grid layout, how to create specific layouts, creating responsive sites, and more. I've signed up and watched a few videos, but plan to watch them all.
All three of these sites were great learning opportunities. I really enjoy the sites that have a great visual way to see the results of changing certain properties and their values of the grid. The first site linked to even more great grid learning sites that I plan to check out as well. I love using grid for layout. Obviously flex has it's place, but for some reason grid is easier to wrap my mind around.