Foundation 6 具有完全对齐的外边缘的砌体效果？

Question

使用 Foundation 6 有没有办法创造这种效果？这很难描述，但很容易想象。

我们想要的是一个大块，然后是两个小块的侧边栏。三个块的外边缘应对齐以形成一个矩形。

我们试过嵌套，但没有用。

我们正在使用 the XY grid，但如有必要，愿意返回到其他基金会网格。

Answer 1

XY 网格通过一些嵌套来支持这一点，并在外部网格中添加 fluid class 以强制子项伸展。

@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>

Foundation 6 具有完全对齐的外边缘的砌体效果？

Foundation 6 masonry effect with perfectly aligned outer edges?

css

zurb-foundation-6