Menu icon Foundation
Foundation 6 + Masonry Grid

Hello

Has anyone been able to get the Masonry Grid to work with Foundation 6?  

I tried going through the instructions @ http://zurb.com/university/lessons/make-a-masonry-grid-responsive 

This has worked for me in the past (Foundation 5), but I was not successfull getting it to work with Foundation 6.

Thanks for any pointers!
jules

foundation 6masonry

Hello

Has anyone been able to get the Masonry Grid to work with Foundation 6?  

I tried going through the instructions @ http://zurb.com/university/lessons/make-a-masonry-grid-responsive 

This has worked for me in the past (Foundation 5), but I was not successfull getting it to work with Foundation 6.

Thanks for any pointers!
jules

Esa Rantanen over 3 years ago

 Hello Jules,

the instructions you are referring to are for F5.

With F6 the block-grid syntax has changed:

http://foundation.zurb.com/sites/docs/grid.html

Jules Webb over 3 years ago

 Hi Esa

Thank your for the information.  Yes, I do realize the syntax changed for F6. I tried applying the same idea to F6 syntax, but it didn't work for me.  Have you been able to get it to work?

Esa Rantanen over 3 years ago

 Jules, of course you do :)

Masonry works really nice on my demo: http://demo.eccola.fi/masonry-demo/

Ken Mau over 3 years ago

Hi Esa,

Can you put the files on codepen or a zip?

Esa Rantanen over 3 years ago

Hi Ken,

masonry is very easy to implement!

I just minified masonry.pkgd.js into foundation.js using FoundationPress gulp build system, created a simple loop that outputs the items into the grid and initialized. Added some inline styling.

If you don't use a build system like FoundationPress, you could try loading masonry.js after foundation.js and initialize/configure it with jQuery, see examples: http://masonry.desandro.com/

zip available, message me. Have a nice weekend!

Ken Mau over 3 years ago

Hi Esa,

Thanks for the reply. I will give it a shot.

I've emailed you to see if you could give me a zip file.

 

Thank you again

ken

Kyle De Sousa over 2 years ago

Hey guys, did you get to do this eventually would love to see how you got it working with block grid 

 

kholis Muhaimin about 2 years ago

Hi, you can try with this script

<ul id="container" class="row small-up-2 medium-up-3 large-up-4">
  <li class="column column-block">
    <p>We're stoked to finally release the newest member of the Foundation family…</p>
    <p>We're stoked to finally release the newest member of the Foundation family…</p>
    <p>We're stoked to finally release the newest member of the Foundation family…</p>
    <p>We're stoked to finally release the newest member of the Foundation family…</p>
  </li>

 

Work like charm!