Map an array, but place X amount of items each pass

Sorry if this has been answered before- didn’t even know how to correctly google it.

I’m creating a grid of client logos using Tailwind, react, and GSAP. Client logo paths are loaded in via a json file. The client logo list is pretty long, so I thought it would be interesting to have the images in each grid col-spans (‘cells’) fade to a different image every few seconds.

My solution thus far is to map through all the logos and stack a certain number of them on top of each other as absolute before moving onto the next col span and then animate them in and out using the ids of the col-spans. I’m having trouble wrapping my mind around the approach. Especially with responsibly changing the grid-cols.

The approach so far (some pseudo-code some irl code):

const maxCols = 4
const maxRows = 3
const itemsPerRow = Math.floor( logosList.length()/maxCols/maxRows)
const isExtra = () =>{
     if(logosList.length() % itemsPerRow >0) return true
     else return false
}
const numRows = Math.floor( logosList.length()/maxCols )



export default function ClientImages(){
     useEffect(() => {
          for(i = 0; i <= i/maxCols/maxRows; i++  )
               // to be figured out gsap method
               gsap.to(`img-${i}`, {animate stuff})
     },);
     
     function setLogos(){
          let subset
          for ( index = 0; index == maxCols * maxRows; index++ ){
               if(isExtra){
                    subset = logosList.slice(index, itemsPerRow + 1) 
               }
               else subset = logosList.slice(index, itemsPerRow) 
               return(
                    <div className="col-span-1 relative" id={`clientColSpan-${index}`}>
                    {subset.map((logo) => {
                         <Image className='absolute' src={logo.src} yada yada yada />
                    })}
                    </div>
               )
          }
          
     }
     return(
          <div className="grid grid-cols-2 md:grid-cols-4 2xl:grid-cols-6">
               {setLogos}
          </div>
     )

}

Here’s a visual representation of my thought process