Grow your CSS skills. Land your dream job.

understanding grid templates in photoshop

  • # February 18, 2013 at 11:56 pm

    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…

    # February 19, 2013 at 5:59 am

    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

    # February 19, 2013 at 6:07 am

    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.

    # February 20, 2013 at 10:15 am

    As @AndyHowells pointed out, definitely give border-box a try.

    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".