Menu icon Foundation
Nested Grids with different column count/gutter/width

How would one use the default Foundation grid system globally and set up an additional grid system to use within a particular scope?

I'm playing around with the idea of using the default Foundation 12-column grid for pretty much everything, but to have an additional 24-col grid to be used for finer control over placement of elements.

This is what I'm talking about:

Nested grids with different column gutter margin values

Is this possible and if so, is this even a good way to achieve finer control over placement?

Here is an example:

Screenshot 2014 08 29 12.50.15

When setting up a form like the one above I had to choose to have the Name field span 4 columns, Email span 5 columns, and Submit span 3 in order to fill the 12. Ideally I would have chosen 4.5, 4.5, and 3, but this isn't possible with Foundation.

My plan was to make a 24-column grid and have the input elements span 9, 9 and 6 respectively.

I look forward to hearing anyone's thoughts on this.

Foundationgridnested gridnesting grids

How would one use the default Foundation grid system globally and set up an additional grid system to use within a particular scope?

I'm playing around with the idea of using the default Foundation 12-column grid for pretty much everything, but to have an additional 24-col grid to be used for finer control over placement of elements.

This is what I'm talking about:

Nested grids with different column gutter margin values

Is this possible and if so, is this even a good way to achieve finer control over placement?

Here is an example:

Screenshot 2014 08 29 12.50.15

When setting up a form like the one above I had to choose to have the Name field span 4 columns, Email span 5 columns, and Submit span 3 in order to fill the 12. Ideally I would have chosen 4.5, 4.5, and 3, but this isn't possible with Foundation.

My plan was to make a 24-column grid and have the input elements span 9, 9 and 6 respectively.

I look forward to hearing anyone's thoughts on this.

Rafi Benkual almost 5 years ago

You could. Easiest would be to download a custom version with 24 columns and set the width of a column when nested to those column widths.

On your form example, you can change the width of a column. IE make a custom column width whatever % you want.