Need help understanding how grids and layouts work in UI design! [on hold]

I am a newbie in the UI design world and desperately need help in understanding how grids and layouts work. I use the Sketch application and have set up my grids and layouts as shown below.

My question is, do designers typically try to match the grid blocks with the layout columns? If you look at the 3rd image at the bottom, you will see that they don't. If the answer is yes: how do you set up your grids/layouts so that they will nicely line up together? If the answer is no: why do designers bother using grid blocks if they have a layout? What are grids for??

Last but not least: are there any good resources for learning more about this specific topic?

Thank you so much in advance.