JSFiddle - React, Tailwind, and code Playground

HTML

Change the array values and itemsperrow to see the change
<br/>
<br />
<div class="products"></div>

CSS

div{border:solid 1px #999}
span{width:33.3%;display:inline-block;background:#ccc;border-left:solid 1px #999;}

JavaScript

var index=0;
        var arr=['a','b','c','d','e','f','g','h','i',10];
         var tot =arr.length;
         itemsperow =3;
         var percent;
          var loop=Math.round(tot/itemsperow);
         
          //checking if remainder exist 
          if(tot%itemsperow!=0){
        	loop=loop+1;
          }
          
         for(i=1;i<=loop;i++)
            {
        	$('.products').append("<div>");
                for(j=1;j<=itemsperow;++j){
        			if(index==tot){
        				break;
        			}
                                        $('.products').append('<span>'+arr[index]+'</span>');
 ++index;
        		  }
                
                $('.products').append("</div>");
        		
        		if(index==tot){
        				break;
        			}
            }