Как сделать сеточную галерею на css?

Question

[McBernar]

Ребята, привет.

Учусь верстать, работаю с псдшками с дрибла и наткнулся на проблему — как можно серстать чистым цсс-ом такую вещь, как на картинке?



Чтобы при изменении размера окна браузера картинки выстраивались друг под другом?
Сейчас они выстраиваются по верхнему краю строки и не "проваливаются" выше под предыдущий элемент.

Answer 1

[L0k1]

чистым css - это блоки сделать inline-block, а общему контейнеру column-count: 3;

w3bits.com/css-masonry

Comments

[kiberlain]

в ие9 не будет работать

Answer 2

[Алексей Немиро]

Примерно так:

ul{list-style-type:none;}
li{display:inline;}
li:nth-child(4):after { content:"\A"; white-space:pre; }

\A - перевод строки.

Либо можно ограничить ширину элементов.