Как сделать высоту по контенту?

Question

[masha096]

Если смотреть на первый итем, то видно , что у отступ между первым и вторым элементом отличается, чем в других блоках.
https://jsbin.com/bayiwoduxo/1/edit?html,css,js,output

Comments

[Ankhena]

Между всем элементами отступ одинаковый: 10px. Это видно по вашим же рамочками.

Хрустальный шарик говорит, что вы хотите получить кирпичную кладку.
Для этого используют css columns или плагины типа masonry.

[masha096]

Ankhena, Пробую. Не такой эффект - https://jsbin.com/vevuzehavu/5/edit?html,css,js,output
Слева один итем. А справа все остальные. Не поровну.

[Ankhena]

masha096, да, потому что columns пытается сделать колонки одинаковой высоты.

[masha096]

Ankhena, Тоесть по сути есть один вариант - masonry?
Высота итемов может быть разная. В этом и суть

[Ankhena]

masha096, дело в том, что информация о том, что именно вы хотите получить в разных случаях имеется только в вашей голове.

[masha096]

Ankhena, вот

[Ankhena]

masha096, тогда то, что во второй вашей песочнице соответствует скрину: колонки примерно одной высоты.

[masha096]

Ankhena, Получаю тогда слева 2 элемента, справа 4

[masha096]

Ankhena,

[masha096]

Ankhena, Тоесть слева 2, справа 4.
А ожидалось по 3.

[Ankhena]

masha096, считайте на js.

[masha096]

Ankhena, В каком смысле? Не совсем понятна идея.

[Ankhena]

masha096,
ну, например:

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

Либо аналогично, но используя свойство колонок column-fill.

Или ещё как-нибудь по-другому