Могу ли я сделать макет только для CSS?

Question

Прежде всего: да, этот вопрос похож на вертикальный и горизонтальный масонство только для CSS

Но так как никто еще не ответил на этот вопрос, я попробую еще раз. Я установил макет кладки для своих сообщений WordPress, используя свойство столбцов CSS. Это прекрасно работает, однако мои сообщения теперь не отсортированы по дате (на самом деле они есть, но не так, как пользователь мог бы их получить).

#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 также не будет работать здесь, поскольку он требует, чтобы элементы имели одинаковую высоту.

Вот скрипка моей проблемы: https://jsfiddle.net/9m24172b/

Таким образом, чтобы быть кратким, вот цитата из вышеупомянутой статьи:

Текущий:

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

Желаемая:

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

Есть идеи, использующие чистый CSS?

Answer 1

Наступает CSS Grid, что делает чистую кладку CSS легкой. Однако это еще не все, и нам придется подождать и посмотреть на кросс-браузерные ошибки. Я знаю, что это не поможет вам сейчас, но это свет в конце туннеля.

Узнайте больше о CSS Grid: https://rachelandrew.co.uk/presentations/css-grid