Full Bleed CSS Grid

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.

Subgrid would be nice here

The solution provided here is limited by the lack of support for subgrids. If subgrids were available, the solution would be more refined. In lieu of subgrid, the solution applies a grid to each full-bleed section within the layout using a common class .grid and creates the full-bleed/centered effect that way.

Grid lets you do unusual things

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.

Grid requires a rethink

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.