Display looped data in Div with css style

Question

i following code in jsp, where ModelData is List< Entry< String, Integer>>

<div style="width:20px; float:left";>
<c:forEach items="${ModelData}" var="map">
    <c:forEach items="${map.value}" var="entry"> 
       <c:out value="${entry.key}"/>: <c:out value="${entry.value}"/>  
    </c:forEach>
</c:forEach>
</div>

above code displays like this:

word1: 123
word2: 122
word3: 108
word4: 78
word5: 60
word6: 50
word7: 50
word8: 45
word9: 45
word10: 8

but i want it to display like below, with max of 4 columns, and min of 5 rows.

word1: 123   word4: 78  word7: 50  word10: 8
word2: 122   word5: 60  word8: 45
word3: 108   word6: 50  word9: 45

This has to get adjust its height and depending on items in loop.

How could i do this.Please help me on this.

here i have like this structure

<div>
 <div>
  <ul>
   <li></li>
  </ul>
 </div>

 <div>
 --my shown code here --
 </div>
</div>

Answer 1

 body { height: 100px; display: flex; flex-direction: column; flex-wrap: wrap; } div { flex-basis: 33.33%; } 

 <div> word1: 123 </div> <div> word1: 123 </div><div> word1: 123 </div><div> word1: 123</div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div><div> word1: 123 </div> 

Try this CSS:

height: 100px;
display: flex;
flex-direction: column;
flex-wrap: wrap;

Apply this css to parent element.

flex-basis: 33.33%;

Apply this css to child element.