Menu icon Foundation
Nesting grid with 10 cols in the nested rows

Hi,

I want to realize a layout with a contentblock (10 columns) and an adbar on the right (2 columns).

The contentblock is splitted in several rows with blocks. I know I can do this with nesting.

But: I would like to have 10 columns in the nested rows, not 12. So I can do blocks with 2 - 2 - 4 -2 for example.

Has anyone an idea, how I could this?

Thanks in advance
Kerstin

    <div class="row">                  
            <div class="large-10 columns">         
                  <div class="row">                  
                      <div class="large-2 columns"><img src="bg_widget_news1.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news2.jpg"></div>
                      <div class="large-4 columns"><img src="bg_widget_news3.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news4.jpg"></div>
                   </div>       
                  <div class="row">                  
                      <div class="large-2 columns"><img src="bg_widget_news5.jpg"></div>
                      <div class="large-4 columns"><img src="bg_widget_news6.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news7.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news8.jpg"></div>
                   </div>       
                  <div class="row">                  
                      <div class="large-4 columns"><img src="bg_widget_news9.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news10.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news11.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news12.jpg"></div>
                   </div> 
            </div>   
            <div class="large-2 columns"><img src="adbar.gif" alt="" title=""></div>
        </div>   
       

         

nestinggrid

Hi,

I want to realize a layout with a contentblock (10 columns) and an adbar on the right (2 columns).

The contentblock is splitted in several rows with blocks. I know I can do this with nesting.

But: I would like to have 10 columns in the nested rows, not 12. So I can do blocks with 2 - 2 - 4 -2 for example.

Has anyone an idea, how I could this?

Thanks in advance
Kerstin

    <div class="row">                  
            <div class="large-10 columns">         
                  <div class="row">                  
                      <div class="large-2 columns"><img src="bg_widget_news1.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news2.jpg"></div>
                      <div class="large-4 columns"><img src="bg_widget_news3.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news4.jpg"></div>
                   </div>       
                  <div class="row">                  
                      <div class="large-2 columns"><img src="bg_widget_news5.jpg"></div>
                      <div class="large-4 columns"><img src="bg_widget_news6.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news7.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news8.jpg"></div>
                   </div>       
                  <div class="row">                  
                      <div class="large-4 columns"><img src="bg_widget_news9.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news10.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news11.jpg"></div>
                      <div class="large-2 columns"><img src="bg_widget_news12.jpg"></div>
                   </div> 
            </div>   
            <div class="large-2 columns"><img src="adbar.gif" alt="" title=""></div>
        </div>   
       

         
Andrew Patterson almost 6 years ago

There is a trick for this, but I'm going to rely on memory as I don't have an example at my fingertips.

On each of the inner rows, add a additional class such as "wide-row". Then add the following css to your custom style sheet:

.row.wide-row {
    width: 120%;
}

Your row content can be exactly as you've shown except for one thing. Add the "end" class to the last column in each row to keep it from floating to the right.

The default width of an inner row is 100%. By making your inner rows 120%, they become the same width as your outer row. But you only use 10 of the 12 available columns, or 100%.

Andrew P.

Rafi Benkual almost 6 years ago

Not exactly sure what you mean. Maybe a visual would help.

You can use offset to "fill in" unused columns.

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>

Kerstin Finke almost 6 years ago

Hi,

thank you very much. Andrew had the right trick.

Only I had to set the row-width to 122.8% instead of 120%. I couldn't figure out why, it makes no sense to me, but it looks alright now.

And, yes, the column-class is "end" to prevent the class from floating to the right.

I can't use "offset", because this class only pushes the columns to the right. So I only use 10 columns.

Is there a possibility to set this to solved? Couldn't find.

Greetings
Kerstin

Andrew Patterson almost 6 years ago

I went back to my archives just now to see exactly how I had done it before. What I missed in the description above is that there is a container inside the row. That container is the one that gets stretched and it holds the columns.

With this css:

.wide-row { width: 120% }

and this HTML:

<div class="row">
  <div class="wide-row">
    <div class="small-2 column">
    <div class="small-2 column">
    <div class="small-4 column">
    <div class="small-2 column end">
  </div>
</div>

it should work.

I suspect you had to increase the width to account for margins on the "row" class. With this variation you shouldn't have to do that and the calculation for how much to stretch can be precise.

You can use the same technique to get seven or some other number of cells in a row.

Andrew P.

Kerstin Finke almost 6 years ago

Yes, that's it! Thank you, Andrew!

Azat Galikhanov over 5 years ago

My way:
SCSS
.row .row { width: $row-width }

<div class="row">
  <div class="large-9 columns">
    <div class="row">
      <div class="large-7 columns">

      </div>
    </div>
  </div>
  <div class="large-3 columns">

  </div>
</div> 

Carlos García Montoro about 3 years ago

I'm trying to follow Andrew recipe, and I wonder how to make it responsive. When I resize the browser window, things get broken:

<div class="row">
<div class="row8cols">
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-1 columns">
A form field goes here
</div>
</div>
</div>

 

I can delete medium and replace small-12 with small-8, but, Is there any way to preserve the 12 colums grid for sizes different than large?

 

Carlos García Montoro about 3 years ago

 I see this can be done using Foundation Flex Grid and large-expand class:

<div class="small-12 medium-3 large-expand columns">
A form field goes here
</div>

 

Andrew Patterson about 3 years ago

Carlos, try putting the css for row8cols in a media query so it only applies to large screens. You can find examples in the foundation css. I haven't tried the flex grid yet, but it looks interesting.

Another possibility for your specific situation would be to define your own column width class and use it instead of large-1. For example:

@media ... {
   .lg-1-8 {
      width: 12.5%;
   }
}

It needs to be in a media query so it only affects large screens. You can remove the row8cols div and replace large-1 with lg-1-8 on the column divs.

Andrew P.

Carlos García Montoro about 3 years ago

Thank you Andrew.

As I said, I ended up using Flex Grid instead of the traditional Grid, and it works flawlessly. There is no need to create a row8cols class because it provides large-expand (as well as medium-expand) and it divides the remaining space between all divs that use *-expand in that row. For example:

 

<div class="row">
<div class="small-12 medium-4 large-expand columns">
A form field goes here
</div>
<div class="small-12 medium-4 large-expand columns">
A form field goes here
</div>
...
</div>

 

If you are tied to the traditional grid of Foundation, probably you must do what Andrew suggest, but if you are free to use Foundation 6 and Flex Grid, this does the trick.

Greetings,

Carlos