Question

在基础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>

如果基金会无法做到这一点，那么他们是否能够建议采用可以实现这一目标的技术呢？

提前感谢所有人。

Answer 1

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

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

.parent {
    column-gap: 30px;
}

基础6块不同高度元素的网格

1 个答案: