html - 非等高元素的基础 6 block 网格

<分区>

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

例子(图片) 所以所有底部的灰色 block 都会向上移动到橙色 block 所在的位置，而不是在它们自己的换行符

<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>

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

在此先感谢大家。

最佳答案

如果你想使用 Foundation 的 block 网格，我建议使用 Masonry .这是一个 guide on how to implement it with Foundation ，但请注意，这是 Foundation 5，因此 block 网格类的语法会略有不同。

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