Hello, I’m currently working on developing an interactive user card feature where each card expands upon clicking. I’ve opted to use a collection list to allow clients to manage the cards themselves.
For now, I’m using a grid layout for the cards.
I’m aiming to make each collection item expand to 2 fractional units (2fr) upon clicking. While I experimented with using flexbox instead of grid, I found that the grid layout offers a cleaner look and is easier to maintain.
Is there a way to expand the card to 2fr on click?
Or are there better alternatives to using grid?
Grids are designed to be consistent in their row and column arrangements, so even if you could force a single element to grow, it would either break the grid or overlap its siblings.
If you want the grow effect, your best bet here is flex + an interaction.
If you don’t care about the grow effect, you could likely do this with JS + CSS, but it would be a sudden jump.
Either way, I’m not entirely clear how the rightmost column is meant to behave. I think it would grow, wrap to the next line, and leave a gap where it was originally.
