Expand grid item to 2 columns on hover

Design help Animations & Interactions
1

Hey everyone!
I want to create this effect on hover for all the cards on this CMS page
Hovereffect03-ezgif.com-video-to-gif-converter

I have been able to figure out most of the interaction besides the card expansion on hover.
2ndattempt01-ezgif.com-cut

On each CMS page, the cards range between 5 - 20
I want each card to occupy just 1/3rd width normally and expand to 2/3rd the size when I hover.
Currently, all cards fit in a 1:1 grid. When I change each card size for hover to 2/3rd width it ends up changing the width in default state too.
How do I prevent this from happening?

Layout & Design Animations & Interactions Freelance & Jobs

Here is my public share link: LINK

2

I was able to recreate this interaction using a flexbox with wrap for these items instead of a CSS grid. Most things work fine, however one of the issues is that the last item in each row starts blinking on hover. I guess this is because each item expands towards the right on hover, and the last item in this case has no place to expand which makes it blink continuously. How can I make sure that the last item on each row expands towards left on hover?

Animations & Interactions Bugs Layout & Design Freelance & Jobs

Last column_hover effect