某些单元格的XY基础网格全宽

Question

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

我知道可以将网格容器设置为流体或完整，但我的意图是在一个网格容器内将某些单元格设置为全宽

 <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

我认为您想要的是一个嵌套单元格，其容器的宽度应与视口的边缘相同，而其容器的宽度应保持为1200px（无论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。