Search code examples
htmlcsszurb-foundation-5

Foundation 5 Masonry like Grid

How can I manage to do this (the image) kind of layout with Foundation framework 5? If not possible I really like vanilla CSS option. Javascript is last option. And it should be responsive.

enter image description here

Solution

  • this is pure CSS sample for your Grid, You can check it online : https://jsfiddle.net/5peu1qef/

    .block1 { margin: 0 1.5% 10px 0; width: 60%; float:left; background: #e85959; height: 300px; } 
.block2 { margin: 0 1.5% 10px 0; width: 29.3%; float:left; background: #e85959; height: 145px; }
.block3 { margin: 0 1.5% 10px 0; width: 60%; float:left; background: #e85959; height: 145px; }