css - 基金会6砌体效果与完美对齐的外边缘？

使用Foundation 6是否可以创建此效果？很难描述，但很容易可视化。



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

我们已经尝试过嵌套，但这无济于事。

我们正在使用the XY grid，但愿意在必要时返回其他Foundation网格。

最佳答案

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>

关于css - 基金会6砌体效果与完美对齐的外边缘？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53912159/