How to expand css grid items?

Hi. I am trying to make a css grid with items that change size when clicked, the idea is to show extra information inside when clicked.

I am not sure how to handle this.

If I set the grid-template-colums with absolute units and then I double the width in the .active class… there is a collision ,elements are mashed up.
The best success i got was setting grid-template-colums as 1fr 1fr 1fr and then set .active to a certain amount of pixels,

but it is far from perfect because if you expand the window really wide… the active item becomes the smallest!!!

it uses some minimal React but I guess the CSS is what rules the style anyway.

I tried a couple of options here. The first method was adding a width: 100px; to the .inactive class. This kept the elements at a set width when not clicked, and allows them to expand to a set size when expanded. You could also try max-width and min-width properties to see if these keep your sizes responsive as the window grows and shrinks.

Edit: I also tested percentages by setting the .inactive class to 70% width and the .active class to 100%. This stops any overflow but I’m not sure if you want gaps between the boxes.

1 Like

This is what I came up with: https://codesandbox.io/s/406wo4ykv7

It dynamically changes grid layout according to active id.

1 Like

Hi , thanks for your help. jenows work is very interesting.
In the end I did a bit of tinkering improving shadew idea. Making a responsive version of that.

I learnt how to find out the element size, In the end I used a library that does that. ‘react-measure’ it even comes with callbacks that react to change of size, so I spent some time learning how to implement it.

It is very react heavy, but that is what I am mostly learning anyway.

This can be done manually using react Refs which are shortcuts to the dom, I was curious to try the library.

By accident I saved over the same project so here is the same link again

you can see it live here: https://codesandbox.io/s/w20zz9vjow

now the active div is always 3/2 (1.5) the size of a third of the grid, the inactive is 3/4 the size (0.75)

You can see it is not perfect, because the divs in the other rows have too much extra space, I need not 2 but 3 different sizes. 1.5, 1 and 0.75…
But anyway this was never meant to be any project. I have to stop going down the rabit hole!!

why can’t there just be a CSS pseudo-class for this…