I'm doing something wrong with css grids and can't figure out where

Hi everyone,

I am doing my own little react project to maintain my font end knowledge while i continue onto the back end part of the full stack-engineer course. But I ran into an issue early on with my css that i can’t seem to crack.

For some reason my css grids are being overwritten when in the browser, I thought the solve would be to increase specificity but that just makes the grid disappear altogether. If it helps this is a react-redux web app.



I think you’re using Mozilla FF, if I am not wrong. I could reproduce your issue like this:

Include the wrong number of cells in one of the areas (for example, four instead of the five you assigned), then save that and manually refresh the browser. Now, dev tools should show the property scratched with an “Invalid property value” warning message.

Now, fix that by adding back the right amount of elements inside each area (5 of 5 in your case). For some reason, in Chrome this updates dev tools, but in Mozilla, the dev tools stays like… cached, maybe? with the error.

Hiwever, if I manually refreshed this afterwards, dev tools updated without the warning.

Would this help in your case? If so, just remember manually refreshing.

Otherwise, let me know and let’s find a way. :slight_smile:

Just to be extra clear. What I mean by

is doing, for example: “. area area .” instead of “. area area area .”


I did what you recommended but the grid is still being overwritten by something which is weird.

Yeah, it is. It persists after you manually refresh in Mozilla and even if you do it on Chrome, too?

Well, maybe someone more experienced will be able to identify the culprit. In the meantime, I can only think of accepting your proposal of pushing to GitHub and seeing if I can also clone it and see if more eyes make any difference.

I was thinking also… Could it be that one of the specific css files of the components overrides something because of the cascading?