Menu icon Foundation
Using different number columns with Nested grid settings

Is there a way to apply different settings to a nested grid?
For instance, I have a main layout grid of 16 columns, but for nested forms, i'd like a 12-column grid.

The grid-row mixin doesn't include extra options that are in settings like $row-width, $total-columns - and I presume re-including those at a point in the scss will take those values globally from that point forward.

I have a feeling that the answer may be 'no, because it's based on percentages', and that it would need to generate another set of .column classes which could be messy, but maybe i'm missing a trick?

nested gridcolumnssettings

Is there a way to apply different settings to a nested grid?
For instance, I have a main layout grid of 16 columns, but for nested forms, i'd like a 12-column grid.

The grid-row mixin doesn't include extra options that are in settings like $row-width, $total-columns - and I presume re-including those at a point in the scss will take those values globally from that point forward.

I have a feeling that the answer may be 'no, because it's based on percentages', and that it would need to generate another set of .column classes which could be messy, but maybe i'm missing a trick?

Rich about 5 years ago

Hi Toby,

I had the same question as you and found your post. Here's a solution you that applies for a 12-grid that could easily be tweaked for a 16-grid:

http://foundation.zurb.com/forum/posts/1555-nesting-grid-with-10-cols-in-the-nested-rows

See most recent answer by Andrew.

Toby Stokes about 5 years ago

Thanks Rich,
To summarise again,
Use the same 16 column grid, but set to a .row container that is 16/12 wide (133%)
Then just use the first 12 columns!

I can imagine there being some overflow/scroll problems if misapplied, but sounds workable in theory.

I actually ended up using a 24 column base grid, which gives me both the useful subdivisions of a 16-based and 12-based grid!