Grow your CSS skills. Land your dream job.

Grids, Background Images, and Padding Oh My!

  • # July 11, 2011 at 4:40 pm

    I like grid systems. They are easy to use, clean, and organized. However, many designs I work with have background images and padding around the content. Because of that, there’s a need to push the content away from the grid area. But doing so brakes the layout.

    Just wanted to see what others do with this situation? Any suggestions on what works best? Thanks!

    # July 11, 2011 at 5:55 pm

    i run into this problem a lot because i want to add a border to a column or something, and it breaks the grid. the only solution i’ve found is to add a child div in the grid div.. so like..



    content



    # July 11, 2011 at 6:43 pm

    Definitely the only solution other than editing the grid itself.

    I never use the grid systems, situations like this illustrate why!

    # July 11, 2011 at 8:20 pm

    @stevendeeds I have been using a nested div, even though it’s an extra div. But seems to be the easiest option when the design calls for it.

    @TheDoc If the design was created with a grid layout in mind, then it works well. If it wasn’t then you code the best way possible!

    # July 12, 2011 at 2:19 am

    What’s somewhat annoying to me is when a designer thats working with you on a site starts designing it with the grid, then decides to add strokes and drop shadows that extend outside the grid system. That just makes it frustrating for me to have to go back to him and tell him to keep it inside the 960 lines.

    I dont live by the grid, but it does help a lot when I’m turning around 4 sites every 2 weeks.

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

You must be logged in to reply to this topic.

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