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.
-
Какой-то текст который должен быть в блоке
Интересная ссылкаGrid is great
CSS Grid is a two-dimensional layout tool. It is great for layout 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 layuts. If for example you need to lay out a series of identical boxes like those you see here, Flex may be a better option.
-
Know what tool to use
In some cases Grid and Flex are interchangeable. In other cases one is definitely better than the other. The choice usually comes down to whether you are laying out a list of items (Flex) or creating a more nuanced layout (Grid).
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.