Its great you are looking into this because it helps to understand the differences between the old ms-grid spec and the newer spec which uses "grid-area: auto".
Again, you will begin to discover the limitations of the old ms-grid. I used Prepros to run autoprefixer on the exported main.css file also. In order for autoprefixer to work properly, you must name a least "one" grid-area in your layout. It needs this to compute how many children their are in the grid container.
You will find out that you have limited aligning capabilites with ms-grid like no "end" setting etc.
What happened in my testing honestly was I got hooked on grid and wanted more complicated design structures. As I progressed I realized that both ms-grid or fallback to flex would be very hard to accomplish once you get into the advanced design using the newer spec.
One has to make a choice to either go full on grid or try to support the older browsers along with IE10, IE11, Edge 12-15 (which do not support the newer spec).
My current belief is why build something simple in grid that can be simple in a fallback like flex or rows-columns?
You will just be doubling your work. Its when you need a tough layout section that grid should be used, and then test with @ supports rule for older browser on page load (which can be done easily with one @ supports statement and another conditional statement for ms-grid browsers IE 10 and IE 11 - which do not understand @supports) and then load replacement html structure for the older browsers.
This way the design is driven first by simple easy fallback section interlaced with complicated grid sections that can be replaced with new html structures if needed for older browsers.
At least thats where I am headed.....
Bootstrap 5 CSS Grid.
