Как сделать такую сетку? Есть простые решения?

Question

[Вася Фамилия]

Проблема в том что на втором ряду картинка на две колонки не могу сообразить, как это просто сделать

Answer 1

[Олег]

используй Masonry https://masonry.desandro.com

Comments

[Вася Фамилия]

Ради одного кусочка такую штуку подключать

[Олег]

Вася Фамилия, так просил простое))

Answer 2

[ValeraValera]

Всего 4 колонки по 25% , центральная - 50% , элементарная арифметика вроде

Answer 3

[kulaeff]

Если количество блоков фиксировано, их размеры фиксированы, то просто сверстайте и задайте соответствующие стили. Лучше всего использовать флексы. В остальных случаях - masonry.

Answer 4

[Froggyweb]

Не понимаю почему все к-дают решение Masonry он как бы платный для коммерческого использования как и фэнсибокс кстати.

Comments

[kulaeff]

https://github.com/desandro/masonry/blob/master/RE...

Выдержка из этого файла:

Masonry has been actively maintained and improved upon for 8 years, with 900 GitHub issues closed. Please consider supporting its development by purchasing a license for one of Metafizzy's commercial libraries.

Таким образом, он не платный.

Answer 5

[Марти Макфлай]

Сетка такая делается в несколько строк флексбоксом на CSS без всяких Masonry
На хабре неплохая статья есть - Работа с Flexbox в гифках