Menu icon Foundation
Foundation nested grid

 

I'm pretty new to foundation and css so I'm not really sure if this is possible, but pretty much I have a layout for my site where it has a nested foundation grid with each column kind of like a card layout with a button. Users are able to click the button and then a 2nd row the "child row" would show up, kind of like a navigational thing.

The issue I have is that my nested div for my 2nd parent row doesn't position itself to the left because the 1st parent div is in its way. Is there any way for me to overlap it?

Heres my code pen for what i'm trying to do: https://codepen.io/anon/pen/BrgoJv some sample code:

<div class="row">
    <div class="small-12 medium-3 columns">
        parent content
        <div class="row" style="width: 75rem;">
            <div class="small-12 medium-6" style="width: 37.5rem;">
                 child content
            </div>
            <div class="small-12 medium-6" style="width: 37.5rem;">
                 child content
            </div>
        </div>
    </div>
    <div class="small-12 medium-3 columns">
        parent 2 content
        <div class="row" style="width: 75rem;">
            <div class="small-12 medium-6 columns" style="width: 37.5rem;">
                 child content
            </div>
            <div class="small-12 medium-6 columns" style="width: 37.5rem;">
                 child content
            </div>
        </div>
    </div>
</div>

If you click on the button in parent 1 in my code pen, a child row will display directly underneath parent 1 with both columns taking up 50% of the total row's width.

If you click on button in parent 2, a child row will display directly underneath parent 2 and therefore the layout is not even. Is there any way for my parent 2 child row to go underneath parent 1 so that my layout looks even? 

Thanks!

gridFoundationcss

 

I'm pretty new to foundation and css so I'm not really sure if this is possible, but pretty much I have a layout for my site where it has a nested foundation grid with each column kind of like a card layout with a button. Users are able to click the button and then a 2nd row the "child row" would show up, kind of like a navigational thing.

The issue I have is that my nested div for my 2nd parent row doesn't position itself to the left because the 1st parent div is in its way. Is there any way for me to overlap it?

Heres my code pen for what i'm trying to do: https://codepen.io/anon/pen/BrgoJv some sample code:

<div class="row">
    <div class="small-12 medium-3 columns">
        parent content
        <div class="row" style="width: 75rem;">
            <div class="small-12 medium-6" style="width: 37.5rem;">
                 child content
            </div>
            <div class="small-12 medium-6" style="width: 37.5rem;">
                 child content
            </div>
        </div>
    </div>
    <div class="small-12 medium-3 columns">
        parent 2 content
        <div class="row" style="width: 75rem;">
            <div class="small-12 medium-6 columns" style="width: 37.5rem;">
                 child content
            </div>
            <div class="small-12 medium-6 columns" style="width: 37.5rem;">
                 child content
            </div>
        </div>
    </div>
</div>

If you click on the button in parent 1 in my code pen, a child row will display directly underneath parent 1 with both columns taking up 50% of the total row's width.

If you click on button in parent 2, a child row will display directly underneath parent 2 and therefore the layout is not even. Is there any way for my parent 2 child row to go underneath parent 1 so that my layout looks even? 

Thanks!

Rafi Benkual 3 months ago

I think so, but the parent 2 child needs to be in the left most column for it to line up there or do not nest. Each new section can be a new row and set of columns.