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
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)
Thanks Mark, really appreciate your help! Much neater solution