Как правильно сделать блок с разными высотой?

Question

[offsiderst]

я делаю через сolumn
но , наверное, что-то не учитываю
https://jsfiddle.net/hnjmpty8/1/

Comments

[Ankhena]

Уточните, что именно у вас не получилось

[offsiderst]

Ankhena, первый блок везде одинаков по высоте (как на скрине, не важно картинка и текст, и сколько текста)

[Ankhena]

offsiderst, на скрине они явно разной высоты.

[offsiderst]

Ankhena, блоки 1.2.3 одинаковы
а картинка (которая посередине) больша по высоте, чем две картинки по бокам

[Ankhena]

offsiderst, даже если вы считаете, что в блок 1 и 3 входят только картинки, а 2 только текст, то они разной высоты не вооруженным взглядом.

Но блок 1 и 3 состоит из картинки и текста.

Если предположить, что это просто кривая картинка и у вас в ТЗ действительно почему-то написано такое сомнительное условие, то колонками так не сделать.
И нужно считать высоты на js и на нем же разбивать блоки по столбцам.
Даже не уверена, что имеет смысл брать за основу masonry.

Если есть требования по высоте и к другим карточкам, то гридами.

[offsiderst]

Ankhena, а как можно убрать расстояние вот это? инспектор говорит что такая высота wrap, но там не такие маргины от итемов

[Ankhena]

offsiderst, издержки columns

[offsiderst]

Ankhena, тоесть поведения , которое нельзя исправить да? по умолчанию

[Ankhena]

offsiderst, да, меня это тоже расстраивает.
Альтернатива это masonry и ему подобные плагины.