Question

我需要使用Foundation网格构建内容块的金字塔。

问题在于，对于不能被12整除的行，我无法在金字塔中堆叠下一行，以使其位于其上方的行的中心。

就像我需要一个半列偏移或类似的东西。

我考虑过在嵌套行上使用.centered，但这似乎有分割半列的相同问题。

<div class='row'>
    <div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
    <div class='small-5 columns'></div>
    <div class='small-1 columns'>1</div>
    <div class='small-1 columns'>2</div>
    <div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
    <div class='small-4 columns'></div>
    <div class='small-1 columns'>1</div>
    <div class='small-1 columns'>2</div>
    <div class='small-1 columns'>3</div>
    <div class='small-3 columns'></div>
</div>

小提琴： http://jsfiddle.net/1cq1gqtq/

Answer 1

我会改用块网格。块网格实用程序将填充上面的行创建的任何可用空间。

有关如何使用它的示例，请参阅Foundation文档：http://foundation.zurb.com/docs/components/block_grid.html

当我不需要在外柱的左/右侧填充时，我经常使用它。

如何使用Foundation Grid创建金字塔布局

1 个答案: