Ok so these are going to be really basic "I dont know what I am doing questions - yet". My purpose is to try to learn to use CSS Grid for layout purposes as Bootstrap does fail Big Time when comparing the layout methods.

So my intuition is to go for grid layout right away. But now, that might not be correct but to rather use Flex.

The default for "Design For" is fallback first. If I use Flex to design it will work in IE10. If I then create a new support query for Display Grid I can then change and design for Grid. Is this the way it works ?

Yes, but I would but the support query in sooner, then toggle which section (fallback or grid) you want to design for. Have a look at Coffeecup Bob's videos.
Regards Phil

Yes that makes sense. I need to revisit the videos and start learning the basics as this was what was tripping me up.

Since both CSS Grid and Flex use the container principle I see where this can work. You would never be able to switch from CSS Grid to row and columns as the html structure is changed. But changing from CSS Grid to Flex should use the same structure.

I am not worried about older ipads or browsers like Windows XP Chrome since I can always put in a notification popup that says "Hey I see you are using a older browser, you might want to change to a newer browser to enjoy our more current updated site".

The way I am seeing it (because of the clever way intuitive switch button), it's like designing for an extra breakpoint.
Every you design on the grid side is not taken by the fallout first section so should be easy. It just seems like a lot of extra work because Microsoft is not going with the times and IE. I've heard Edge is not much better.

For the all the normal layout of elements in a container I seem to be sticking with flexbox. I'm only currently using grid for the overall layout and to layout containers. Regards Phil