0

I decided to use foundation 6's new flex grid and I noticed that I am not getting the intended behaviour as I was getting with the block grid.

This is the HTML, it's the same code used in both instances:

<div class="row">
    <div class="small-3 column end text-center red">
        column 1
    </div>
    <div class="small-3 column end text-center green">
        column 2
    </div>
   <div class="small-3 column end text-center green">
        column 3
   </div>
   <div class="small-3 column end text-center green">
       column 4
   </div>

   <div class="small-3 column end text-center green">
       column 5
   </div>
   <div class="small-3 column end text-center green">
       column 6
   </div>
   <div class="small-3 column end text-center green">
       column 7
   </div>
   <div class="small-3 column end text-center green">
       column 8
   </div>

   <div class="small-3 column end text-center green">
       column 9
   </div>
   <div class="small-3 column end text-center green">
       column 10
   </div>
   <div class="small-3 column end text-center green">
       column 11
   </div>
   <div class="small-3 column end text-center green">
       column 12
   </div>
</div>

I tried using Flex Grid and Block Grid

I intend to get the result of the Block Grid link in a Flex Grid, is it possible?

I went through the F6 documentation but could not find an appropriate solution in there (at least from what I found).

Thank you!

Last Templar
  • 336
  • 5
  • 22

1 Answers1

1

You can use block grids inside of Foundation's Flex Grid. You must realize that the flex grid totally replaces the standard Foundation Grid. Also, the Flex Grid and a Block Grid are two totally different things. Flex Grid takes over the entire grid system ( rows, columns ... ). A block grid is simply a method of distributing an equal number of columns over multiple or a single row.

This is most likely what you are looking for:

https://foundation.zurb.com/sites/docs/flex-grid.html#block-grids

That is how to use the Block Grid inside of the Flex Grid.

You will need to make sure you have the Flex Grid enabled as well:

https://foundation.zurb.com/sites/docs/flex-grid.html#importing

blindMoe
  • 104
  • 3