I wondered what is the best solution to not display the header for mobile viewpoint when using css grid but make it reappear for 640px and above.
My test site is http://phildias.com/master.html so you can see what I mean when you shrink the browser.
Kind regards, Phil

At below 640 px you would in the display setting go to "More" and select "none" from the dropdown selector. Then you would have to move to above the 640 px and set it back to what it was.

Hi twinstream. Thank you for your input. Unfortunately that didn't work because if you display:none for the header container the grid space behind still stays there because of the grid taking up the whole viewpoint.
Think I have solved it by changing the header layout section in the grid area to 0px for screens 639px and less. Regards Phil

What if you change the height of the main container height to auto?
Or, give the next container, below the header, a negative top margin that equals the height of the header?

There are probably a thousand different ways to "skin a cat" when it comes to using the powerful layout tool Grid CSS. I am unsure why yesterday when I did the test on the "Holy Grail" template this worked but this morning I could not recreate what I did yesterday.

So I was able to set the display to "none" for the header container. I did have to then change the Grid setting for the main container to Line Based Placement and increase the row setting for it from 1 to 2.

Your way of setting the height to "0" seems much more easier.

I have included my modification as an example.