Character Sheets with CSS Grid: Grid Areas not working

So I've found this and this thread talking about CSS Grid and how to use it. I've managed to make it work, but only in the preview window.

But for some reason, the grid doesn't work in the game, and everything is just stacked after each other. I'm attempting to make the main layout with grid-template-areas. Have anyone manage to make it work, or should I try to formulate the grid through other means? The existing threads only discusses using one-dimensional grid-template-areas or completely ignoring it in favour of other methods. To me it just seems like a fairly useful method for designing grids.

.charsheet {
  display: grid;
  width: 700px;
  height: 900px;
  grid-gap: 5px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 150px 1fr 1fr 1fr 20px;
  grid-template-areas:"cstitle cstitle   cstitle   cstitle"
                      "skill   main-info main-info power"
                      "skill   attack    inv       power"
                      "skill   misc      inv       power"
                      "note    note      note      note";
}

• Sheet CSS
• Sheet HTML
  

In Game:

Preview:

EDIT: CSS link fixed

Both of your links go to the html file. there's no link to your css.

Woops, here are the links to them:

Sheet HMTL

Sheet CSS

I took a quick glance and it looks valid (I am still waking up so cant look too closely). But I wonder if this is because you are using .charsheet as the root (which is a special element in roll20). It's probably worth creating another div level beneath it to hold the grid css, and put all your divs inside that. 

It's probably a specificity problem (I have a feeling .charsheet may be overridden with display: block from the Roll20 side). GiG's solution will work for that.

GiGs said:

But I wonder if this is because you are using .charsheet as the root (which is a special element in roll20). It's probably worth creating another div level beneath it to hold the grid css, and put all your divs inside that. 

I did try with add a div to wrap everything, and remove the `.charactersheet`. (updated the gists)

Now the preview looks as bad as in game...

Actually, I had missed to give the main css class a name, and the combination of removing .charactersheet from the CSS and wrapping the whole sheet's content inside a main div.

Updated sheet:

• CSS
• HTML
• 
  
  
  

So it's working? Great :)