Foundation 6 block-grid of non equal height elements

Question

In foundation 6 block-grid, how can one make a grid of non equal height elements that is placed immediately after their parent.

Example (image) So all the bottom grey blocks moves up to where the orange blocks are, instead of being on their own 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>

If this is not possible in foundation, is their than anyone who can advice towards a technique that does allow this?

Thanks in advance to all.

score 2 · Accepted Answer · answered Sep 01 '17 at 12:04

If you want to use Foundation's block grid, I advise using Masonry. Here's a guide on how to implement it with Foundation, but note this is Foundation 5 so your syntax for the block-grid classes will be slightly different.

Alternatively you can use CSS Columns to achieve a similar effect, utilising the column-gap property. Full example here.

.parent {
    column-gap: 30px;
}

Foundation 6 block-grid of non equal height elements

1 Answers1