are CSS grids always so... flimsy?

i remade my entire creations site and i was really happy with it at first, but every time i open those mini boxes to the left (i forgot the name) the entire site shifts along with it - AND IT DRIVES ME NUTS!!! >:(

i’m using grid areas for the first time as well, i really liked it but is there any way to keep it more “still” and not have everything stretch and all?

the page i’m talking about → creations
the codepen →

PS (unrelated): i’m not done with the site yet, i know the text is a bit unreadable against that background

1 Like

I can only offer sympathy this time, rather than help, because I’ve never had much success with CSS grids.


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 :star: magic :star: (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.


I’d second what Ravenous said (it should fix how all 3 rows change size), but I’d add that no matter how you slice and size that grid, you’ll get content jumping up and down on the second row as those details/summary elements in the 1st row open and close, unless you specifically leave room for them which will be difficult to manage over time as you add content.

When using grid you have to think about how/whether the children will resize, keeping in mind that a given grid cell will always be the same width as the cell above/below it, and always the same height as the cell to either side of it. So if anything in row 1 or column 1 grows too big, everything else in the same row/column will, and all others are pushed.

You can work around this a bit by merging cells with each other (I.E, naming one area that takes up all three cells in the left column, and putting a parent container in that slot which contains the songs and art lists), but that complicates things and for your content, I’d say using 3 flexbox columns (arranged via grid or just another parent flexbox) would be the simplest approach.

It’s actually really hard to talk about grids via text somehow, I feel like diagrams are needed every time just to keep my own story straight :joy_cat:


oh i didnt think about it like that at all… makes much more sense now why it changes size. thanks for the help, i’ll try out the auto row thing now!!!

1 Like