Javascript / Vue.js -How to dynamically convert 1D array into 3D array

Imagine you have an array:

listItems = [1, 2, 3, 4, 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, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67];

And I want to convert it into a 3-dimensional Array((Matrix of ROW x COLUMN)x SET by Number of Instances, like this:

Customizable parameters:

Rows = 3
Columns = 4

**Example: 3 Rows and 4 Columns **

--GENERATED GRIDS--

Outer set Container Array - Containing the generated sets

[

SET 1 - Inner 2D array

[
    [[1, 2, 3, 4], [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]]
],

SET 2 - Inner 2D array (It should create a 2D array based on ROW and COLUMN until it runs out of values.)

[
    [[38, 39, 40, 41], [42, 43, 44, 45],[46, 47, 48, 49];
    [[50, 51, 52, 53], [54, 55, 56, 57], [58, 59, 60, 61]];
    [[62, 63, 64, 65], [66, 67]]
]

]

Note, that rows and columns of the generated array are changeable. Meaning that the number of items in the rows or column may change and even the number of items in the data set may also differ.

EXPECTED RESULT: (GENERATED HTML structure after looping through 3D array ):

<HTML>
<container>
 <div class ="set">
  //A SET
  <div class "column">


       <row><div class "items"> 1 </div><div class "items"> 2</div><div class "items"> 3</div><div class "items"> 4</div></row>
        <row><div class "items"> 5</div><div class "items"> 6</div><div class "items"> 7</div><div class "items"> 8</div><row> 
        <row><div class "items"> 9</div><div class "items"> 10</div><div class "items"> 11</div><div class "items"> 12</div></row>
     </div>

      <div class "column">
        <row><div class "items"> 13</div><div class "items"> 14</div><div class "items"> 15</div><div class "items"> 16</div></row>
        <row><div class "items"> 17</div><div class "items"> 18</div><div class "items"> 19</div><div class "items"> 20</div><row> 
        <row><div class "items"> 21</div><div class "items"> 22</div><div class "items"> 23</div><div class "items"> 24</div></row>
     </div>

 <div class "column">
        <row><div class "items"> 25</div><div class "items"> 26</div><div class "items"> 27</div><div class "items"> 28</div></row>
        <row><div class "items"> 29</div><div class "items"> 30</div><div class "items"> 31</div><div class "items"> 32</div><row> 
        <row><div class "items"> 33</div><div class "items"> 34</div><div class "items"> 35</div><div class "items"> 36</div></row>
     </div>
    </div> //End of Set 1

<div class ="set'>
      //A SET
      <div class "column">
        <row><div class "items"> 27</div><div class "items"> 38</div><div class "items"> 39</div><div class "items"> 40</div></row>
        <row><div class "items"> 41</div><div class "items"> 42</div><div class "items"> 43</div><div class "items"> 44</div><row> 
        <row><div class "items"> 45</div><div class "items"> 46</div><div class "items"> 47</div><div class "items"> 48</div></row>
     </div>

      <div class "column">
        <row><div class "items"> 49</div><div class "items"> 50</div><div class "items"> 51</div><div class "items"> 52</div></row>
        <row><div class "items"> 53</div><div class "items"> 54</div><div class "items"> 55</div><div class "items"> 56</div><row> 
        <row><div class "items"> 57</div><div class "items"> 58</div><div class "items"> 59</div><div class "items"> 60</div></row>
     </div>

 <div class "column">
        <row><div class "items"> 61</div><div class "items"> 62</div><div class "items"> 63</div><div class "items"> 64</div></row>
        <row><div class "items"> 65</div><div class "items"> 66</div><div class "items"> 67</div></row>
     </div>
    </div> //End of Set 2

</container> //End of Container
</HTML>

Any help is much appreciated.