CODEWITHSUNDEEP
cssgridzurb-foundation
Boy Pasmo
Boy Pasmo

Reputation: 8511

7 column in a row using zurb foundation 5

Is there any way on how to do 7 columns in a row with the same size? I wish to do a calendar-like grid on it.

 S  M  T  W  T  F  S
 _  _  _  _  _  _  _
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|
|_||_||_||_||_||_||_|

Been trying it but I can't position it well. Any help would be much appreciated. Thanks!

Upvotes: 3

Views: 1291

Answers (2)

mpgn
mpgn

Reputation: 7251

You have two choice :

Use offset grid of foundation : http://foundation.zurb.com/docs/components/grid.html

<div class="row">
      <div class="large-7 medium-7 medium-offset-5 columns end" >
          <div class="large-1 columns" >
            1
          </div>
          <div class="large-1 columns" >
            2
          </div>
          <div class="large-1 columns" >
            3
          </div>
          <div class="large-1 columns" >
            4
          </div>
          <div class="large-1 columns" >
            5
          </div>
          <div class="large-1 columns" >
            6
          </div>   
          <div class="large-1 columns" >
            7
          </div>           
     </div>
</div>

Or use the class end of Foundation 

<div class="row">
      <div class="large-7 medium-7 columns end" >
          <div class="large-1 columns" >
            1
          </div>
          <div class="large-1 columns" >
            2
          </div>
          <div class="large-1 columns" >
            3
          </div>
          <div class="large-1 columns" >
            4
          </div>
          <div class="large-1 columns" >
            5
          </div>
          <div class="large-1 columns" >
            6
          </div>   
          <div class="large-1 columns" >
            7
          </div>           
     </div>
</div>

I made a jsfiddle for you ! you can see the difference !

Upvotes: 1

Sudheer
Sudheer

Reputation: 2985

In order to get equal height for rows use equalizer here is the link for the documentation link

<div class="row" data-equalizer>
  <div class="large-7 columns">
  <div class="large-1 columns" data-equalizer-watch>
    ...
  </div>
  <div class="large-1 columns" data-equalizer-watch>
    ...
  </div>
  .
  .
  .
</div>
</div>

EDIT:use another 

<div class="large-5 columns">

inside the previous row div if you have something other than calender to display.

If you want to have 12 grid row structure and 7 columns for calender you can center the grid.by using 

<div class="row">
  <div class="large-7 large-centered columns">6 centered</div>
</div>

If you just want a seven grid structure for the webpage customize foundation. Here is the link for customizing foundation Link

Upvotes: 1

Related Questions