csszurb-foundation-6

Foundation 6 masonry effect with perfectly aligned outer edges?

Using Foundation 6 is there a way to create this effect? It's hard to describe but easy to visualise.

enter image description here

What we want is one large block, then a sidebar of two smaller blocks. The outer edges of the three blocks should be aligned to make a rectangle.

We've tried nesting, but that doesn't help.

We are using the XY grid but willing to go back to the other Foundation grids if necessary.

Solution

  • The XY grid supports this with a bit of nesting, and the addition of the fluid class to the outer grid to force children to stretch.

    @import url('//cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/css/foundation.min.css');

body {
  padding: 30px;
}

.content-cell {
  background: #f4f442;
  text-align: center;
}
    <div class="grid-x fluid grid-margin-x">
  <div class="small-9 cell content-cell">small 9</div>
  <div class="small-3 cell">
    <div class="grid-y grid-margin-y">
      <div class="small-6 cell content-cell">small 6</div>
      <div class="small-6 cell content-cell">small 6</div>
    </div>
  </div>
</div>