Adding padding to a CSS grid system like 960.gs

问题

I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:

The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background.

The problem comes when I try to re-use the grid inside an 'inner' <div> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size).

I tried redefining my grid column sizes inside the .inner class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <div>s inside the .inner container, but obviously if there are more or less than 2 then things start to look wrong.

Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.

thanks Matt

回答1:

the 960gs has an .alpha and .omega class for allowing nesting. Usually this removes the leading 10px and trailing 10px margin from the elements you apply it to. You might be able to reverse these and misuse them to give you the padding you need - the overall column widths would add up, but the padding would be on the "wrong" side

<div class="container_12">
  <div class="grid_12">
    <div class="grid_5 omega">...</div>
    <div class="grid_3 alpha">...</div>
  </div>
</div>

I haven't tested this though so not sure that it would work

来源：https://stackoverflow.com/questions/9304364/adding-padding-to-a-css-grid-system-like-960-gs

标签

css

960.gs