I think the issue here comes from using fr (fraction units) for all of your columns and rows.
Specifically, for the rows, you’ve got:
grid-template-rows: 1.5fr 1.5fr 0.5fr;
This effectively sets a portion of the grid container’s height for each of the rows. So if we take the total of the three values, 1.5fr + 1.5fr + 0.5fr = 3.5fr, we could say that the first row will take up 1.5 / 3.5 of the height of the grid container.
One important thing to know about here is that the browser does a bit of 
magic (for lack of my ability to explain it well) in order to figure out the actual pixel height for each of the rows. And it will strive to maintain the ratio that you’ve defined with fr units based on the height of the contents inside each of those rows.
Here’s a little example of how that works:
Let’s say the content in the third row is 100 pixels tall. Because the other rows have a fr value that is 3 times greater (0.5fr versus 1.5fr), the first and second rows would then be 300 pixels tall.
However, things change if the content inside the second row, for example, is taller than 300 pixels. Let’s say its content is 600 pixel tall. In this case, the other rows will adapt their height so that the ratio of fr values is correct. So when the the second row has content that is 600 pixels tall, the first row will also be 600 pixels tall and the third row will be 200 pixels tall in order to preserve the ratio of fr values of your grid-template-rows property.
Here’s what I think will solve this for you:
You don’t need to only use fr units in grid template column and row declarations.
What I think works instead is to set the rows with the auto keyword. This instructs the browser to set the height of each row to whatever its own content’s height is:
grid-template-rows: auto auto auto;
This will stop the other rows from resizing when you open/close the details elements.
