Как сверстать блоки похожие на плиточную раскладку?

Question

[franticstas]

Как лучше сверстать блок на скриншоте с поддержкой ie11?
Работ может быть любое количество.
Возможно ли это сделать только на флексах без js?
Спасибо.

Answer 1

[Rustam Bainazarov]

Можно даже без классов модификаторов, тупо на nth-child:


Если нужно вставлять именно img и если соотношение сторон картинок будет известно заранее, то вот, чтобы размеры по высоте не скакали до загрузки картинок:

Comments

[franticstas]

Спасибо, примерно так и хотел, но формулу не смог придумать .grid__item:nth-child(5n+4),
.grid__item:nth-child(5n+5)

Answer 2

[Даниил Маслов]

Как ещё один из вариантов.

Comments

[franticstas]

Спасибо за ответ, но решение не совсем удобно, нужно отдельно логику для класса small прописывать. Решение Рустам Байназаров как раз подошло

[Даниил Маслов]

franticstas, согласен