June 29th, 2020
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
- Breaking out of the wrapper
- Using CSS custom properties
If you take the images from the article, it tells a pretty cool story.
The original post Styling Layout Wrappers In CSS.