CSS3 Grid Layout Design

The initial design was first a concept of development using CSS3 Grid with no fancy elements.

Then I decided to recreate the initial CSS3 Grid layout as a Flexbox layout as well. In which I tried to keep both layouts looking similar and fluid functioning as well.

All while trying to keep a screen reader in mind.

However, this lead me to this updated design to be a little more stylish to include Bootstrap Studio components and more Idealistic base level screen reader support.

This screen reader support I feel is more intuitive I believe, where the title and then the content come first in the source. Rather than having had the header come before the content. Which is something I could have done with the initial design, but I also needed a cleaner start on the IE10/11/Edge support.

And, that's where this design comes into play. I'll first start with getting IE support including making room/space for grid gutters that only fully supported browsers would display initially.

For IE support this requires actually adding additional columns and rows it appears. But since I am working with IE support first I won't need to undo that for browsers that support the grid-gap property by default.

So all in all I think I have accomplished what I set out to do with the CSS3 Grid Layout and the Flexbox Layout. Keeping both versions with their DOM order intact and coming really close to similar designs, short of the Flexbox Layout having an issue with no gap space between the Nav and Content sections. EDIT: using grid-row-gap so it's like the Flexbox Layout now.

I'll tweak it from time to time, such as seeing if I can reduce the CSS code. Basically compare the grid CSS's and flexbox CSS's to see if they can be reduced or combined to make an overall smaller CSS file. Stuff like that. :)