Containers and wrapper divs have been a thing probably since forever, even the old trustable Boostrap was innovative at the beginning because it renamed them to rows and columns. But there is a better way, a way that completely removes the need for them to be present in our markup.
Here comes the almighty Grid
Historically we have been using wrappers and containers with different classes to have elements that occupy different percentages of the viewport, some elements would be boxed for example, and others like heroes might take the whole width.
The idea to completely remove them comes from a recent video from Kevin Powell in which he uses grid-template areas to easily layout margins and padding, so instead of having divs with different paddings and margins, we would have a single grid-columns-layout governing them all, this way we remove unnecessary divs and have a centralized way for controlling our layout.
This is super easy to do using the shorthand for areas like in the following example:
.layout { display: grid; grid-template-columns: [full-start] 20px [content-start] minmax(0, 1fr) [content-end] 20px [full-end]; } .full { grid-column: full; } .content { grid-column: content; }
Using this pattern [****-start] [****-end] automatically creates areas we can then use to position our elements. It’s also super powerful imagine all the variants we can now easily create with media queries, everything centralized on a single rule. Here is an extensive mdn article about this feature
Closing up here is a pen with a simple example