CODEWITHSUNDEEP
javascriptcsslayoutzurb-foundation
Brendan
Brendan

Reputation: 19353

How do I fill a grid row using Zurb Foundation 4?

I want to acheive the following layout,

Desktop:
[----A---][-B-]
[-C-][-D-][-E-]

Mobile:
[----- A -----]
[---B--][--C--]
[---D--][--E--]

I can get 'B' to jump down to a new row in the mobile version and take up half the space, but I can't get it to share with 'C' - here is what happens:

[----- A -----]
       [---B--]
[--C--][---D--]
       [---E--]

How can I acheive the desired layout? I am using Zurb Foundation 4 framework.

The markup is as follows

<div class="row">
  <div class="large-8 small-12 columns">
    A
  </div>
  <div class="large-4 small-6 columns">
    B
  </div>
</div>

<div class="row">
  <div class="large-4 small-6 columns">
    C
  </div>
  <div class="large-4 small-6 columns">
    D
  </div>
  <div class="large-4 small-6 columns">
    E
  </div>
</div>

Upvotes: 1

Views: 452

Answers (2)

Sergey Kochetov
Sergey Kochetov

Reputation: 390

Well as far as I see you can use following markup for your purpose (fiddle):

<div class="row">
  <div class="large-8 small-12 columns">
    A
  </div>
  <div class="large-4 small-6 columns">
    B
  </div>
  <div class="large-4 small-6 columns">
    C
  </div>
  <div class="large-4 small-6 columns">
    D
  </div>
  <div class="large-4 small-6 columns">
    E
  </div>
</div>

Upvotes: 3

Andr&#233; Dion
Andr&#233; Dion

Reputation: 21708

Put everything in one .row.

Here's a demo.

Upvotes: 2

Related Questions