Как реализовать сетку картинок с разным размером на CSS?

Question

[otterely]

Суть: есть куча картинок разного размера. Нужно, используя CSS3, расположить их так, как показано на картинке:


Сейчас выглядит так:


Код:

<article id="preview">
<a href="link"><img src="img" class="img" alt="starry-night-over-the-rhone" height="1333" width="2000">Starry Night Over the Rhone</a>
</article>

(каждый блок - 1 article)

CSS для них:

#preview {
    float: left;
    width: 30%;
    margin: 0px 1% 1%;
}

Я понимаю, что это связано с тем, что последняя картинка подстраивается под блок с картиной "Cypresses":


Но как ее заставить этого не делать, не знаю.
Нужно решение на CSS (без px, в %)
Заранее спасибо!

Answer 1

[_ _]

Самое простое решение - разбить на N колонок, раз у вас ширина картинок одинаковая.

Answer 2

[Rsa97]

Многоколоночная вёрстка

Comments

[otterely]

Оно же вроде только px понимает, разве нет?
Мне нужно именно с %

[Rsa97]

Задаётся минимальный размер колонок. Если реальный размер колонки становится меньше заданного, количество колонок уменьшается.
Пример на jsfiddle.net

Answer 3

[A K]

Онли css
jsfiddle.net/Symphony/mgx8qsgx

Comments

[otterely]

Мне нужны %. Если задать column процентное значение, не работает

[A K]

otterely:

думаю, стоит выставить проценты jsfiddle.net/Symphony/mgx8qsgx

Answer 4

[Иван Соломенников]

Уроки по CSS/CSS3. Часть 23. Многоколоночный текст

Answer 5

[otterely]

Всё, проблема решена, всем огромное спасибо ;)

Comments

[otterely]

Николай Петюх: Собственно, все ответили про одно и то же. Все решилось до безобразия просто, свойством column-count: 3;