CSS Grid (Base) - Inline CSS Grid. Simple positioned layout that has a Header, Content Area (center), and Footer. The Content Area then contains another (inline) CSS Grid that changes its layout depending on application state.
Flex1 - Flexbox version. While Flexbox allows a similar grid layout, the disadvantage is the inability to span different sections when required. For example, I have the need for Content/Left to have the ability to span the Header and Footer areas depending on state (in ReactJS).