Incorporating Bootstrap5 and VueJS 2, I am working on designing a layout of cards in a "pinterest-style" arrangement, as depicted in the following screenshot:
https://i.sstatic.net/AvdWR.png
To achieve the layout showcased above, the HTML markup required is as follows: [Access Codesandbox here]
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<div class="row">
<div class="col-md-4">
<article>
</article>
<article>
</article>
</div>
<div class="col-md-4">
<article>
</article>
<article>
</article>
</div>
<div class="col-md-4">
<article>
</article>
<article>
</article>
</div>
</div>
<aside class="col-md-3 ml-auto">
...sidebar content...
</aside>
</div>
</div>
</main>
What JavaScript technique can I utilize to split a data array into 3 new arrays with equal elements in each, except for the last array? This would enable me to structure the layout as per the screenshot displayed above. For instance, if the initial data array is [1,2,3,4,5,6,7,8,9,10,11], I aim to obtain something like
[ [1,2,3,4], [5,6,7,8], [9,10,11] ]Although I made an attempt at this in VueJS, it appears my approach was flawed as some cards had gaps and the order was incorrect. My knowledge of JavaScript may be limited. My attempt: https://codesandbox.io/s/vue-bootstrap-card-layout-0xjlt?file=/src/App.vue