JSFiddle - React, Tailwind, and code Playground

by Daniel

HTML

<div class="wrapper">
  <div class="block" id="v1"></div>
  <div class="block" id="v2"></div>
</div>

CSS

p{
  padding: 0;
  margin: 0 0 3px 0;
}
.wrapper{
  display: flex;
}

.block{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;  
  
  width: 50%;
  height: 80vh;
  
  padding: 10px;  
  
  color: white;
  font-weight: bold;
  text-align: justify;  

}

#v1{
  background-color: #335;
}

#v2{
  background-color: #533;
}

.w100{
  width: 100%;
}

JavaScript

/* Исходный массив */
var a = [1,2,3,"q",5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,"l",39,40,41,42,43,44,45,46,47,48,49,51];
/* Размер группы */
var n = 4;
/* Результаты */
var result, resultZeros;

/* Последний элемент не фиксированного размера */
result = Array(Math.ceil(a.length / n)).fill(0).map( (v, i) => a.slice(i*n, (i+1)*n) );


/* Последний элемент фиксированного размера */
resultZeros = Array(Math.ceil(a.length / n)).fill(0).map( (v, i, array) => ( l = a.slice(i*n, (i+1)*n) ).concat( Array( Math.max(0, n - l.length) ).fill(0) ) );


/* Вывод */
document.querySelector("#v1").innerHTML = result.map( row => (row.map( el => "<p>" + el + "</p>" ).join("") + "<div class='w100'></div>") ).join("");

document.querySelector("#v2").innerHTML = resultZeros.map( row => (row.map( el => "<p>" + el + "</p>" ).join("") + "<div class='w100'></div>") ).join("");