Как выводить ленту постов в зависимости от ширины экрана?

Question

[Дмитрий Масленников]

Есть задача сделать ленту постов, которая будет динамически подстраиваться под ширину экрана пользователя. Сложность в том, что при достаточно больших разрешениях посты выводятся в 2 колонки, а при уменьшении разрешения - в одну.

Ленту в 2 колонки пробовал сделать поочередным добавлением float left и right в зависимости от четности элемента:

.post:nth-of-type(2n+1) {float: left; width: 50%;}
.post:nth-of-type(2n) {float: right; width: 50%;}

При уменьшении разрешения media убирает float и все идет в одну колонку.

Это решение рабочее, но у него есть существенный минус.В ленте периодически образуются разрывы из-за того, что посты имеют разную высоту и float:left может попасть вправо, а float:right может попасть влево.

Как можно нормально вывести ленту постов под эту задачу только средствами css?

Comments

[Kovalsky]

Если по минимум изменений, то можете к .post:nth-of-type(2n+1) {float: left; width: 50%;} добавить также clear:

.post:nth-of-type(2n+1) {
    float: left;
    width: 50%;
    clear: both;
}

[Дмитрий Масленников]

Никита Полевой: да, фишку с clear пробовал, немного помогает уменьшить частоту разрывов, но не убирает их совсем.

Answer 1

[Adikjoro]

Изучи Flex-верстку, не будет никаких проблем. Здесь хорошо все объясняется. Ниже есть интерактивная демонстрация работы flex-свойств.
Насчет кроссбраузерности, в 2017 году, особо можешь не париться, все браузеры стабильно поддерживают, кроме старых версий IE.