960gs grid in grid

Question

How do I make more grids inside another grid?

For eg.

I have a 2 column with 2 or more columns inside the left one:

------------------   ---------
|                |   |       |
|  ______   ___  |   |       | 
|  |     |  |  | |   |       |
|  |_____|  |__| |   |       |
|                |   |       |
|________________|   |_______|

If I do (container_24):

<div class="grid_16">
    <div class="prefix_3 grid_6 suffix_2"></div>
    <div class="grid_4 suffix_1"></div>
</div>

<div class="grid_8">
</div>

This will cause problems due to the padding on the grids. Is there to reset the system so I can use a mini grid inside another grid?

score 6 · Answer 1 · answered Jun 11 '11 at 08:53

If you want to have a set of grids inside a grid you use the .alpha and .omega classes.

<div class="container_24">
    <div class="grid_16">
        <div class="prefix_3 grid_6 suffix_2 alpha"></div>
        <div class="grid_4 suffix_1 omega"></div>
    </div>

    <div class="grid_8">
</div>

.alpha - removes the margin-left

.omega - removes the margin-right

score 0 · Answer 2 · answered Jun 02 '11 at 23:05

When I run into something like this, I generally take one of two approaches:

Change the size of the inner-most grid. In your case, change prefix_3 to prefix_2, grid_6 to grid_5, or suffix_2 to suffix_1.
Overwrite the styles in your own stylesheet by targeting that specific element and reducing the padding.

960gs grid in grid

2 Answers2