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

Question

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

Answer 1

Here's my solution based on your visual representation.

1. Create the grid

As we need two different grids for desktop and mobile, it's better to have a function that does this job specifically.

// spread images to grid
const createGrid = (images, col, row) => {
  const totalItems = images.length;
  const totalCells = col * row;
  const itemsInCell = Math.floor(totalItems / totalCells);
  let moduloItems = totalItems % totalCells;

  // create grid
  const grid = [];
  for (let i = 0; i < totalCells; i++) {
    let cell = [];
    for (let j = 0; j < itemsInCell; j++) {
      const index = i * itemsInCell + j;
      cell.push(images[index]);
    }

    grid.push(cell);
  }

  // handle modulo items
  while (moduloItems > 0) {
    grid[totalCells - 1].push(images[totalItems - moduloItems]);
    moduloItems--;
  }

  return grid;
};

const images = [1,2,3,4,...,37];
cosnt grid = createGrid(images, 2, 3); // [ [1,2,3,4,5,6], [7,8,9,10,11,12], ... [] ]

The createGrid() will return an array of grid cells, each cell will contain a number of items that meet your expectation. With this grid cells array, you have enough data to create your HTML.

2. Handle the responsive grid

With the provided grid array we can create responsive HTML grid layouts based on the window's width.

const createHTMLFromGrid = gridArray =>{// your function for HTML};

let html =
  window.innerWidth > 1024
    ? createHTMLFromGrid(createGrid(images, 2, 3))
    : createHTMLFromGrid(createGrid(images, 4, 3));

// append the HTML to your DOM
$(html).appendTo("body");

You can also change the grid based on the window resize event. Once you've got the HTML ready, you can play with the GSAP animation.

See CodePen