Как начать новый столбец в гибком макете переноса столбцов ⇐ CSS

[Anonymous]

Я хочу, чтобы мои данные были упорядочены по столбцам (сверху вниз, слева направо), и каждый заголовок внутри данных должен начинать новый столбец. Есть три ограничения:

• Необходимо использовать flex (мне нужно использовать функцию, специфичную для flex)
  < li>Невозможно сгруппировать данные (например, поместить все элементы данных в один элемент div)
• Невозможно установить фиксированную высоту

Мой вопрос: как мне принудительно разбить столбец внутри макета переноса flex-flow: columns?

Код: Выделить всё

.grid {
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.grid .head {
width: 25%;
background: orange;
border-bottom: thin dotted;
}
.grid .data {
width: 25%;
background: yellow;
border-bottom: thin dotted;
}
/* my attempt to solve this */
.grid {
height: 76px;
}

Код: Выделить всё

Column 1 (3 items)
item 1-1
item 1-2
item 1-3
Column 2 (4 items)
item 2-1
item 2-2
item 2-3
item 2-4
Column 3 (2 items)
item 3-1
item 3-2
Column 4 (1 items)
item 4-1

Подробнее здесь: https://stackoverflow.com/questions/271 ... rap-layout