Как правильно выстроить вот такую вот сетку?

Question

[Назар Линовецкий]

Хочу максимально корректно подойти к вопросу построения такого вида responsive сетки как эта:
etchapps.com (хотя на примере она не респонсив, но идея понятна).

• Как вы видите пропорции информационных блоков соблюдены в соотношении: 1х1 и 2х2.
  
• Сетка при этом 5-ти колоночная.
  
• Так же хотел бы в разметку заложить возможность CSS-ом изменять пропорции блоков. Скажем через замену классов менять ширину колонки.
  

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

Comments

[Nikolay Talanov]

У них там сетка в стиле Masonry, то есть все элементы расположены с помощью абсолютного позиционирования и js. Так что теги html/css у вас тут не к месту.
Такую сетку можно попытаться сделать с помощью флексбокса, но я на 90% уверен что она будет проигрывать по фичам и кроссбраузернсти варианту на js.

[dk-web]

еще как респонсив на примере - и очень круто респонсив. Но Masonry принцип посмотрите.. использую для фотоальбомов. Руками такую сетку сложно выстроить как мне кажется, хотя у них нет разновысотных элементов - банальная таблица))

Answer 1

[lavezzi1]

Плагин Masonry как вариант.

Comments

[Назар Линовецкий]

Не... хочется без этого всего.