Can I make a CSS-only masonry layout?

Question

First of all: yes this question is similar to Vertical vs. Horizontal Masonry CSS-only

But as nobody has yet answered this question, I'm gonna give it another try. I have set up a masonry layout for my WordPress posts using the CSS columns property. This works great however my posts are not sorted by date now (Actually they are but not in a way a user would get it).

#container {
    columns: 3;
    column-gap: 10px;
    width: 800px;
}
.element {
    display: inline-block;
    background-color: red;
    margin-bottom: 10px;
}

<div id="container">
    <div class="element">
        <p>1</p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
        </p>
    </div>
    <div class="element">
        <p>2</p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    <div class="element">
        <p>3</p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>

    <div class="element">
        <p>4</p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    <div class="element">
        <p>5</p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
    <div class="element">
        <p>6</p>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

Flexbox also wont work here as it requires items to have the same height.

Here's a fiddle of my problem: https://jsfiddle.net/9m24172b/

So to keep it short, here's a quote from the above mentioned article:

Current:

1 | 4 | 7
2 | 5 | 8 
3 | 6 | 9

Desired:

1 | 2 | 3
4 | 5 | 6 
7 | 8 | 9

Any ideas using pure CSS?

Well, somebody there suggested not to use columns, but flexbox. Have you tried that? — GolezTrol, Jan 13 '17 at 14:16
If this is an exact duplicate of the other question, stackoverflow gives you the option to set a bounty on the other question to draw more attention. — Dekel, Jan 13 '17 at 14:17
@GolezTrol yes but a flexbox layout requires all items to have the same height and my article sizes can vary a lot.. — Rico Ocepek, Jan 13 '17 at 14:20
@Dekel It's not entirely the same - I've updated the wording of my first sentence — Rico Ocepek, Jan 13 '17 at 14:25
can we get a link to a live example? ie your website or fiddle — Serg Chernata, Jan 13 '17 at 14:25
@RicoOcepek What is the differences between the two questions? I'm afraid I don't see any — Dekel, Jan 13 '17 at 14:26
@Dekel - doesn't matter. Definition of a duplicate on SO is a question that *already has an answer*. — Alohci, Jan 13 '17 at 14:29
@Alohci this is not a duplicate as for closing as dup, but the reason for bounty on other question is exactly for this. If someone will answer this question, and next month another person will find the other question (with no answer and no link to this question) - he will miss the information here. — Dekel, Jan 13 '17 at 14:34
@Dekel - That's OK, If this gets an answer, the earlier question can be closed as duplicate of this one, establishing the link. — Alohci, Jan 13 '17 at 14:37
@Alohci I can imagine why a new user doesn't want to spend his valuable 300 rep on a bounty on a year old question, but rather just asks a new question in his own words providing some extra context. — GolezTrol, Jan 13 '17 at 14:55
This "possible duplicate" is almost 4 years old now and we all know that the web is developing very fast. So especially as the accepted answer do this "duplicate" is "no it's not possible" I wouldn't consider it a duplicate as it doesn't help anyone. Props to @sarah-c for at least pointing out a modern solution instead of wasting time searching for duplicates! — Rico Ocepek, Jan 17 '17 at 21:45

score 1 · Answer 1 · answered Jan 13 '17 at 14:36

1

CSS Grid is coming, which makes pure CSS masonry a breeze. However it's not out yet and we'll have to wait and see about cross-browser bugs. I know this doesn't help you NOW, but it's a light at the end of the tunnel.

Learn more about CSS Grid: https://rachelandrew.co.uk/presentations/css-grid

answered Jan 13 '17 at 14:36

Sarah C

322
1
3
7

I suspected that CSS Grid might be the answer. Any chance of an example? IE has supported CSS Grid for some time. – Alohci Jan 13 '17 at 14:39
Thanks for sharing your ideas but as you already said it doesn't help me now.. http://caniuse.com/#feat=css-grid – Rico Ocepek Jan 13 '17 at 14:40

Can I make a CSS-only masonry layout?

1 Answers1