CODEWITHSUNDEEP
cssresponsive-designframeworkszurb-foundationgrid-layout
colleen
colleen

Reputation: 147

Nesting rows in zurb Foundation grid

I am new to working with Zurb Foundation 5. I am trying to build a complex header bar using the columns and rows. However, I want to use nested rows within a main row.

Is this possible with Foundation grid system? I'm confused on how to order the divs.

I linked to the code I've tried however, I can't get that second row to nest properly.

what I want to do: enter image description here

http://jsfiddle.net/qv6z59w4/ <--- what I tried to do

<div class="row empty">
  <div class="a column small-12 large-3 center panel">A</div>
  <div class="">
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="b column small-6 medium-3 large-2 panel">B
    </div>
    <div class="c column hide-for-medium-down large-1 panel">
      <ul>
        <li class="icon">C</li>
        <li class="icon">C</li>
        <li class="icon">C</li>
      </ul>
    </div>
    <div class="d column hide-for-small large-centered large-6 panel">D
    </div>
    <div class="e column small-12 large-2 panel">E
    </div>
  </div>
</div>

Upvotes: 1

Views: 2468

Answers (1)

Sudheer
Sudheer

Reputation: 2985

div { text-align: center; }

.a { background-color: red; }
.b { background-color: blue; }
.c { background-color: green; }
.n { background-color: yellow; }
.r { background-color: orange; }
.m { background-color: blue; }
<link href="http://cdn.jsdelivr.net/foundation/5.4.3/css/foundation.css" rel="stylesheet"/>
<div class="row">
  <div class="a large-3 small-12 columns">
    A
  </div>
  <div class="b large-8 small-12 columns">
    <div class="row">
            <div class="r large-3 columns">1
            </div>   
            <div class="r large-3 columns">2
            </div>   
            <div class="r large-3 columns">3
            </div>   
            <div class="r large-3 columns">4
            </div>
    </div>
    <div class="row">
            <div class="n large-8 columns">6
            </div>
            <div class="m large-4 columns">7
            </div>    
    </div>
  </div>
  <div class="c large-1 small-6 columns">
    C
  </div>
</div>

Or have a look at this fiddle

Have a row with column-3, column-8 spanned for middle section of the header and column-1 and nest the middle section with the appropriate columns.

P.S: check the fullpage view of the snippet

Upvotes: 1

Related Questions