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 ellimiates 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.
-
Grid is great
CSS Grid is a two-dimensional layout tool. It is great for laying out content in a grid, and for laying out content in two dimensions.
-
Flex is great too
That said, Grid is not always the right option for layouts. If for example you need to lay out a series of identical boxes like those you see here, Flex may be a better option.
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.