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

Question

[fedor_4uk]

Всем привет!
Начал заниматься версткой, уже голову сломал, как можно сделать верстку вот такого макета:


Высота колонок одинаковая, но при сужении/увеличении экрана колонки должны пропорционально адаптироваться, при этом расстояние между ними оставаться прежним.
Перепробовал в flexbox уже кучу вариантов, но никак не могу додуматься до конечного.

Comments

[Rustam Bainazarov]

По картинке не понятно, сколько тут у вас рядов. Один или два. Если два — не понимаю проблемы.

[fedor_4uk]

Рустам Байназаров, Два ряда, больше нету и не будет.
Для Вас может и нет проблемы, но для меня эта "не проблема" затянулась уже очень на много времени((

Т.е. всего 8 элементов, 1-2-4-5-6-8 - одинакового размера. 3-й и 7-й отличаются от них. При адаптивности они должны сохранять свои пропорции.

[Rustam Bainazarov]

fedor_4uk, написал ответ на примере одного ряда. Думаю, вы увидите закономерности и подстроите мой код под себя.

Answer 1

[Rustam Bainazarov]

Я сделал на flex, потому такая штука будет работать и в IE11. Хотя проще сделать с помощью grid. А вообще, такое можно сделать хоть на float (но не надо).



Можете их даже компоновать иначе, ничего не развалится:

Comments

[fedor_4uk]

Спасибо Вам огромное!!!

[Rustam Bainazarov]

fedor_4uk, лайк ещё поставьте вопросу. Я хочу лишний балл.

Не за что!

[fedor_4uk]

Рустам Байназаров, Даже не знал, что тут так, буду знать) Спасибо еще раз!

[Rustam Bainazarov]

fedor_4uk, тут битва за рейтинг. Если у тебя хороший рейтинг, то ты можешь даже обзывать других. И тебе ничего не будет.

(Конечно же, нет. Просто ещё одна игрушка.)

Answer 2

[Alexey Levicky]

Можно смело на гридах делать, и забудьте о IE11)))

Comments

[Rustam Bainazarov]

Когда у вас будут клиенты из IE11 приносить примерно 10–15% прибыли с продаж на сайте, то забыть о них не получается.

Забыть можно только тогда, когда у менее 1% обычных клиентов этот браузер :))

Всё индивидуально.

[sergeyyarkov]

А вот на фрилансе многие просят поддержку ie11

Answer 3

[Антон]

Смотри свойство flex-basis
https://codepen.io/Stoutov/pen/mdbmYJm