How can I expand each box wider with flex-grow?

https://codepen.io/mycenas/pen/NWJodRE I have created 4 rows of 3 boxes with flex, and on click a flex-grow property is applied. No matter how much I increase the number, the boxes will only expand a small amount. I want the clicked box to expand to take up approx 2/3rds of the row, and the other 3 boxes on the row shrink to accommodate it.
2 Replies
MarkBoots
MarkBoots9mo ago
It is a bit of js logic, but in combination with grid you can transition the grid-template-columns https://codepen.io/MarkBoots/pen/MWxLmgQ?editors=1111 i think the logic can be reduced a bit (but it's still early and didn't have my coffee yet)
rumbelina
rumbelina9mo ago
Thanks Mark, really appreciate your help! Much neater solution
Want results from more Discord servers?
Add your server