Меню из нескольких колонок с группировкой пунктов?

Question

[andead]

Есть меню из четырёх пунктов:

<div class="menu">
  <div class="menu__item menu__item-1">
    1111111<br />
    1111111<br />
    1111111<br />
  </div>
  <div class="menu__item menu__item-2">
    22<br />
    22<br />
  </div>
  <div class="menu__item menu__item-3">
    3333<br />
    3333<br />
  </div>
  <div class="menu__item menu__item-4">
    444444444444444<br />
  </div>
</div>

Надо второй и третий пункт вывести в одной колонке:



Код - https://jsfiddle.net/xandeadx/61uLmog7/24/

Условия:
* Каждый пункт неизвестной ширины и высоты
* Количество колонок известно заранее, но не обязательно 3
* Сколько будет пунктов в одной колонке известно заранее, но не обязательно 2
* Дополнительные элементы в html добавлять нельзя

Что пробовал:
* grid-template-areas, но если указать разным элементам один area, то они просто накладываются друг на друга
* columns:3, но все колонки будут одинаковой ширины

Comments

[Ankhena]

0. Хорошо меню делать списком, а не дивами, тем более не дивами с br.
1. JQ плагин masonry
2. CSS columns

[andead]

Ankhena,
0. это просто пример
1. нужно css
2. columns не умеет делать колонки разной ширины

[Aetae]

Как определяется какие пункты в колонку а какие нет?

[andead]

Aetae, .menu__item:nth-child(2), .menu__item:nth-child(3)

Answer 1

[Антон Усачев]

Теоретически, возможно, я думаю. Вроде того, но придется менять настройки ручками для каждого случая...

.menu {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-gap: 10px;
}

.menu__item {}

.menu__item-1 {
	order: 1;
}

.menu__item-2 {
	order: 2;
}

.menu__item-3 {
	order: 4;
	grid-column-start: 2;
}

.menu__item-4 {
	order: 3;
}

И минусовым марджином прижимать трёшки вверх. )

Comments

[andead]

высота пунктов неизвестна, поэтому отрицательный margin-top никак не рассчитать

[Антон Усачев]

andead, js в помощь к расчету высоты нужных пунктов => отрицательный margin-top.

[andead]

Антон Усачев, на js любой дурак сможет :)

Answer 2

[Aetae]

Firefox-only решение:

Chrome-only решение:

:)