Как правильно сделать вывод блоков разной высоты на css/php?

Question

[madc0de]

Интересует не js библиотеки, а именно css/html способ. Ответа не нашел в сети по своей ситуации.
Подробнее: вывод из бд постов.

<?php foreach( $posts as $key => $post ) :  if ( $key == 2  ) : ?>
<div class="size2"></div>
<?php else : ?>
<div class="size1"></div>
<?php endif; endforeach; ?>

Получаем:

<div class="size1"></div>
<div class="size1"></div>
<div class="size2"></div>
<div class="size1"></div>
<div class="size1"></div>

Comments

[Сергей delphinpro]

codepen.io/delphinpro/pen/BWJEgG

Answer 1

[Александр]

А если вывести в таком порядке?

<div class="size1"></div>
<div class="size1"></div>
<div class="size1"></div>
<div class="size1"></div>
<div class="size2"></div>

В css у блоков:
float: left;

Comments

[madc0de]

Тогда в ряд буду 4 блока а 5 уедет вниз
А нужно именно чтобы справа был большой блок, а маленькие слева

[Dmitrey86]

А если обернуть все size1 и size2 в div'ы и задать им свойство float: left. Причем у div c дочерними size1 должна быть фиксированная ширина равная сумме ширины 2х блоков size1 + отступы.

[madc0de]

Я вывожу из цикла записи, я не смогу обернуть это все в див

Answer 2

[Александр]

для этого используют js, вот некоторые с jQuery 100+ Best jQuery Grid Plugin with Example Demo