Note: a lot of this was copied over from this article in order to get a grip on the whole thing. CSS Grid provides a trivial solution to a complex problem: How to display full-bleed content mixed with center-aligned width-constrained content. This solution elimiates the need for auto-margins and floats while allowing the developer to change the grid globally and see those changes apply to each element individually.
Creating this layout, where two items share the total available viewport width evenly alongside full-width and centered content, is suprisingly complex if you don't have CSS Grid available.
Seeing this layout you may still think it's better to just use old methods with auto-margins and max-widths. And you can, but looking at the CSS you'll see the Grid approach is both cleaner and easier to understand.
Creating this layout, where two items share the total available viewport width evenly alongside full-width and centered content, is suprisingly complex if you don't have CSS Grid available.
Seeing this layout you may still think it's better to just use old methods with auto-margins and max-widths. And you can, but looking at the CSS you'll see the Grid approach is both cleaner and easier to understand.