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.
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...
Isn't this the reason why systems like 960gs are so popular...they figure all that out for you?
http://960.gs/demo_24_col.html
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.
As @AndyHowells pointed out, definitely give border-box a try.