How to separate array into 4 columns and pass to each column 10 <li> items from array?

Lets say there is an dynamic array containing 40 elements (array doesn't change over time, but changes on every render). What I want to do is, loop through this array and return 4 <div> elements, each containing 10 li elements (which are objects from my array), where none object from array is repeated. How to achieve that with JavaScript ?

I wanted to style objects from array with one parent flex container, containing 4 div elements with flex: 25%, and li elements being children of that 4 divs. Like in this example: w3c.
But my images are not static so I can't define each element with typing

Using javascript you can do something like this.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

var myArray = [];
var i = 0;
for(i=0;i<40;i++){
  myArray.push("Element "+i);
}

var obj = document.getElementById("temp_main");
counter = 10;
firstElement = true;
output = '';

for(i=0;i<40;i++){
  var temp = '<div class="row">' + myArray[i] + '</div>';
  if(counter>=10){
    temp = '<div class="column">' + temp;
    if( !firstElement ) temp = '</div>' +  temp;
    counter = 0;
  }
  output += temp;
  firstElement = false;
  counter++;
}

output += '</div>'; //closing last column
obj.innerHTML = output;

<!-- language: lang-css -->

.row{
  display:block;
  box-sizing:border-box;
  padding:10;
  padding-right:5;
  width:100%;
}

.column{
  display:block;
  box-sizing:border-box;
  padding:0px;
  width:25%;
  border:1px red solid;
  float:left;
  clear:none;
}

#temp_main{
  display:block;
  width:100%;
}

<!-- language: lang-html -->

<div id="temp_main">

</div>

<!-- end snippet -->

I hope this helps!