Как сделать такую сетку?

Question

[Влад]

Привет.

Подскажите как сделать такую сетку?

https://jsfiddle.net/ohjd1qL3/
Перепробовал уже и масонри плагины и nth-child + order и гриды и флексы и columns ....
Все равно какое-нибудь фото встанет не по макету.
Дополнительная сложность в том, что кол-во фото может быть разным. Иначе на гридах можно было легко сделать

Comments

[Pashok Doom]

А вводные данные какие? Фотки сразу отсортированы по какому-то принципу или каша сплошная? Пережаты в нужный размер или абы как всё?

[Ankhena]

Вот такой вот праздник
https://jsfiddle.net/tkxjbL0u/
Так, если порядок из образца был не важен.

Если важен, т.е. третий столбик должен улетать вниз, то встает вопрос о количестве элементов и прочие подробности.

Answer 1

[Alice]

Держи, поищи готовый вариант и не делай велосипед

Comments

[Влад]

Натыкался. Вот накидал пример с изотопом https://codepen.io/bocihe/pen/zYNWZpM
Обратите внимание на правую колонку ....
Я не понимаю что я упускаю

Answer 2

[Spaceoddity]

https://codepen.io/nanto-work/pen/KKaoabN

Comments

[Влад]

Это не то

[Spaceoddity]

Влад, аргументируйте. В представленные макеты мой код попадает точно.
На десктопе три колонки, равных по ширине, с равными отступами между изображениями; изображения вписаны по ширине без обрезки. На мобиле - две колонки.

[Влад]

Spaceoddity, на высоту изображений посмотрите

[Spaceoddity]

Влад, что не так с высотой? Высота у изображений исходная.

[Влад]

Ваш пример зависит от кол-ва элементов. Вставьте это в ваш пример.
C 15 элементами работает на десктопе и ломается на мобиле,
с 16 элементами не работает на десктопе и не работает на мобиле
с 17 элементами не работает на десктопе и работает на мобиле

<div class="columns">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
  <img src="https://via.placeholder.com/370x370.png">
  <img src="https://via.placeholder.com/370x275.png">
</div>