Is there a neat way to achieve this interactive grid setup?

I'm developing a site for a company, designed by their in house designer. They want their team grid to work like in the screenshots. So a basic grid with all members, then by clicking on a person's profile it expands to cover the grid, obscuring the other members. Is there a simple way to do this or is it only going to be possible with fiddly js? I suggested using gsap flip and having the selected team member take up two columns and two rows but the bios are all so long and they don't want to trim them down that they need to take up 4 columns and two rows.
Screenshot_2024-05-22_at_17.18.28.png
Screenshot_2024-05-22_at_17.18.34.png
Was this page helpful?