如何使用基础网格创建金字塔布局

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>

Fiddle: http://jsfiddle.net/1cq1gqtq/

Answer 1

我会改用方块网格。块网格实用程序将填充上一行创建的任何可用 space。

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

当我不需要在外列的 left/right 边填充时，我经常使用它。

如何使用基础网格创建金字塔布局

How to Create a Pyramid Layout Using Foundation Grid

css

zurb-foundation

grid-layout