一些单元格的 Foundation XY 网格全宽

Question

我想知道是否可以为 Foundation 6.5 XY 网格上的某些单元格设置全宽。

我知道网格容器可以设置为 fluid 或 full 但我的意图是在一个网格容器内将一些单元格设置为全宽。

 <div class="grid-container">
  <div class="grid-x">
    <div class="cell small-12">
      Contained cell.
    </div>

    <div class="cell small-12 full-width-possible">
      Full width cell possible?
    </div>

    <div class="cell small-12">
      Contained cell.
    </div>
  </div>
</div>

除了创建一个单独的完整容器，我没有找到任何其他选择。

有什么想法吗？谢谢！

Answer 1

我想你想要的是有一个嵌套单元格，一个容器，其宽度边缘到视口边缘，同时其容器保持 1200 像素宽（无论 Foundation 默认值是什么）。

您可以尝试的一个选项是使用偏移量。例如

HTML

<div class="grid-container full">
  <div class="grid-x">
    <div class="cell small-10 small-offset-1">
      Contained cell.
    </div>
    <div class="cell small-12">
      Full width cell possible?
    </div>
    <div class="cell small-10 small-offset-1">
      Contained cell.
    </div>
  </div>
</div>

示例结果

Answer 2

通过使用 .small-12，您将单元格设置为 100% 宽度。

因此，对于流体宽度，我建议您只包裹需要包含在 .grid-container 中的单元格和没有 grid-container 的流体单元格。

一些单元格的 Foundation XY 网格全宽

Foundation XY grid full width for some cells

css

zurb-foundation

full-width

xy-grid