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

Question

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

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

我们尝试过嵌套，但这没有帮助。

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

Answer 1

XY 网格通过一些嵌套来支持这一点，并将 fluid 类添加到外部网格以强制 child 拉伸(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>