不等高元素的基础6块网格[重复]答案

【问题标题】：Foundation 6 block-grid of non equal height elements [duplicate]不等高元素的基础6块网格[重复]
【发布时间】：2017-09-01 11:08:19
【问题描述】：

在基础 6 块网格中，如何制作一个高度不等元素的网格，紧接在其父元素之后。

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

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

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

在此先感谢大家。

【问题讨论】：

标签： html css grid zurb-foundation block

【解决方案1】：

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

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

.parent {
    column-gap: 30px;
}

【讨论】：