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

Question

[ch3loveck]

Пытаюсь сделать резиновую (в какой-то мере респонзив) сетку.
Вот такая схема. Блоки - посты в блоге. Порядок такой (можно менять). Блоки представлены дивами с содержимым.


Нужно чтобы при уменьшении окна браузера сохранялись пропорции между блоками по ширине и отношение ширины каждого блока к высоте.
Пробовал задавать ширину и высоту блоков в vw. В принципе работает. Однако чтобы самый большой блок обтекали соседние блоки, ему нужно задавать float. И тут появляется эффект наложения этого блока на соседние при уменьшении окна браузера. Не знаю почему.
Как бы вы решили эту задачу? Или может есть какие-то способы не использовать float или решить проблему с наложением?

Comments

[Андрей Хохлов]

Перестроение блоков планируется при уменьшении экрана?

[ch3loveck]

Андрей Хохлов: до 700px все остается как есть. Далее срабатывает медиа скрин и идет другая верстка.

Answer 1

[Андрей Хохлов]

Мысли такие:

1. Сделать всё с помощью сетки, бутсртап тот же. Можно использовать flex если устраивает его кроссбраузерность.
Либо 2 строки, в первой строке большой блок и ещё один блок в котором 2 строки (2+3 и 4).
Либо 2 столбца (1+5+6 и 2+3+4+7+8)

2. Подходим к тому, что блоки должны сохранять свои пропорции.
Есть такой вот способ:

div {    
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; // 16:9
}

padding-bottom регулирует соотношение сторон и наш блок при ресайзе свои пропорции сохранит: jsfiddle.net/L06u216h

С таким подходом, если в задаче речь идет о плитке фотографий, например, проблем быть не должно.
Сами картинки в блоке естественно прибьете по его размерам с помощью position: absolute;

Comments

[ch3loveck]

значит ли это что нужно будет столбцы оборачивать отдельным контейнером и задавать ему колоночность flex ? Или можно обойтись без изменения html ? Проблема в том, что это вордпресс с его циклом генерации ленты постов.

[Андрей Хохлов]

ch3loveck: Если не хочется городить с выводом нужной разметки - попробуйте masonry.desandro.com

[ch3loveck]

На самом деле я решил проблему наложения блоков: надо просто все блоки сделать float:left. Конечно остаются еще проблемы с перебрасыванием блоков из-за относительных значений ширины, но на это я уже забил.
Спасибо, дружище