Looking at all the component CSS frameworks, I see so much wasted code. Curated ... hogwash.
I'm sure a lot of this junk started out in the infancy of responsive grids. Add a bit of space to a container. Add a bit of space to a row. Add a bit of space to a column. Whoops, first item ... remove some space. Whoops, last item ... remove some space. Oh gheez, first row ...
Well, you get the idea. Not a whole lot of planning and we end up with a dog's breakfast.
Skip ahead a few years and some well-meaning Forest Gump type adds in some spacing utilities. Useful too ... we have a ton of classes to add margins (in any direction too) and a ton of classes to add padding. But, no one goes backwards and removes the existing spacing from the old code.
In one CSS framework, if you add a container and then add a box within that container, you have to remove space from the box or end up with double space. It's the same with responsive grids. The wrapper around the grid has padding and margins. Add the ".row" or ".columns" and the framework has negative margins (don't believe me, look it up, it's right there in the code).
My CSS Framework has containers ... with no padding or margins. It's just a darn container. When I need space, I add it via the utility classes. Need a 1rem padding: here's the class: ".p-1". Need it just right and left ... change the class to "px-1". 'x' is always the horizontal axis, 'y' is always the vertical axis. Always? Yes, do a google search on "is x always the horizontal axis" and see the results. Some neat graphics to show the results. Pretty colors too ...
Ditto for the responsive grid. No padding or margins. I add those in the design elements ... where it should be added. My days of coming up with work arounds to built-in spacing to containers is over. It's CSS framework rebellion time.