非等高元素的基础 6 块网格

Question

在 foundation 6 block-grid 中，如何制作一个由非等高元素组成的网格，这些元素紧跟在其父元素之后。

示例（图片）所以所有底部的灰色块都会移动到橙色块所在的位置，而不是单独存在 newline

<div class="row small-up-1 medium-up-6 large-up-4">
    <div class="column column-block f1" style="height: 100px;">
        <div>
            <h1>block 1</h1>
            <p></p>
        </div>
    </div>
    <div class="column column-block f1" style="height: 250px;">
        <div>
            <h1>block 2</h1>
            <p></p>
        </div>
    </div>
    <div class="column column-block f1">
        <div>
            <h1>block 3</h1>
            <p></p>
        </div>
    </div>
    <div class="column column-block f1" style="height: 175px;">
        <div>
            <h1>block 4</h1>
            <p></p>
        </div>
    </div>
    <div class="column column-block f1">
        <div>
            <h1>block 5</h1>
            <p></p>
        </div>
    </div>
    <div class="column column-block f1">
        <div>
            <h1>block 6</h1>
            <p></p>
        </div>
    </div>
    <div class="column column-block f1">
        <div>
            <h1>block 7</h1>
            <p></p>
        </div>
    </div>
</div>

如果这在基础上是不可能的，他们是否比任何人都可以建议允许这样做的技术？

在此先感谢大家。

Answer 1

如果你想使用 Foundation 的块网格，我建议使用 Masonry. Here's a guide on how to implement it with Foundation，但请注意这是 Foundation 5，所以你的块网格语法类会略有不同。

或者，您可以使用 CSS 列来实现类似的效果，利用 column-gap 属性。 Full example here.

.parent {
    column-gap: 30px;
}

非等高元素的基础 6 块网格

Foundation 6 block-grid of non equal height elements

html

css

grid

block

zurb-foundation