understanding grid templates in photoshop

[shamai]

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…

[Paulie_D]

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

[Andy Howells]

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.

[Author]

Posts