A plain site to learn css grid. I like it because it's structured how I would structure things.
https://learncssgrid.com/
The below link is also quite cool, it makes learning css grid a game which is interesting.
https://cssgridgarden.com/
As soon as you do display: grid;, then all the direct children will become grid items and span the full width. This means that the default is one column that takes up the entire width. I'm guessing the height of the elements are dictated by whatever is inside the children elements at that time.
display: inline-grid;' makes it so the width is based on the longest child element.
The grid-template-rows and grid-template-columns attributes will let you set the size of the rows and the columns. This is a list of however many rows or columns you wish to define.
The repeat function can be used to specify the size of a row or a column dynamically. For example grid-template-columns: 30px repeat(3,1fr) 30px; will create 5 columns. The first and last columns are 30px while there are 3 columns equally sized in the middle.
The grid-gap property is a shorthand for grid-column-gap and grid-row-gap which can be set individually. Very useful!
There are many ways to position things with css grid but the best way seems to be to using named areas.