css - 具有完美对齐外边缘的地基 6 砌体效果？

Question

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

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

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

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

标签： csszurb-foundation-6

Answer 1

XY 网格通过一些嵌套来支持这一点，并且将fluid类添加到外部网格以强制孩子们伸展。

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