I want my data to be arranged in columns (top to bottom, left to right) and every heading inside the data should start a new column. There are three constraints:
- Must use flex (I need to use a feature specific to flex)
- Cannot group the data (e.g. wrap all data items inside one div)
- Cannot set fixed height
My question is how do I force a column break inside a flex-flow: column wrap layout?
.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;}<div class="grid"><div class="head">Column 1 (3 items)</div><div class="data">item 1-1</div><div class="data">item 1-2</div><div class="data">item 1-3</div><div class="head">Column 2 (4 items)</div><div class="data">item 2-1</div><div class="data">item 2-2</div><div class="data">item 2-3</div><div class="data">item 2-4</div><div class="head">Column 3 (2 items)</div><div class="data">item 3-1</div><div class="data">item 3-2</div><div class="head">Column 4 (1 items)</div><div class="data">item 4-1</div></div>