i never use frameworks or at least have not really tried.
the idea of creating my own grids always appealed because I know fully whats going on in the code.
However I decided to try and _design_ using a grid template in photoshop. (usually i just place a few guides: one in the center and one 2/3 for a sidebar.)
however i ran into a problem.
nested items dont sit on the grid.
if i have a container that is 4 columns wide.
and inside i want 4 items floated. seems fine and it lines up nicely.
but if i want padding on the container so the items can breath, now the items no longer sit on the grid, rather they are a bit smaller and are on a totally different grid.
is this bad? i mean… it must happen to the rest of the world…if you apply padding to a container the inner stuff wont be on the grid…
I know what you mean about padding on containers etc, especially on page wraps for example where you have a background and want some spacing inside it.
If you’re building responsively, or at least building with percentages this problem will fix itself. However, don’t forget the power of box-sizing: border-box; as it allows you to have explicit widths that won’t be interfered with by the padding.
Additionally for the problem you’ve noted, usually what I will do is not add padding to the container but to the children instead. It’s more difficult to maintain, but it means you have more control.