Two things that strike me often about the web are how many ways there are to go about the same thing and how many considerations go into even the most seemingly simple things.
Working with wrapper elements is definitely on both those lists. Wrappers (or containers or whatever) are so common — especially when establishing grid layouts and boundaries for the elements inside them — that it’s easy to take them for granted and reach for them without stepping back to consider how they work, why we use them, and how to use them effectively.
Ahmed Shadeed wrote up the most exhaustive article on wrappers I’ve ever read. He provides a brief overview of them before diving into a bunch of considerations and techniques for working with them, including:
- When to use them
- How to size them
- Positioning them
- Adding margin and padding
- Working with CSS grid and other
displayvalues - Breaking out of the wrapper
- Using CSS custom properties
If you take the images from the article, it tells a pretty cool story.
