Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

No CSS Grid Layout Support?

1514828737
Carl T
Sheet Author
I've been experimenting with a sheet revision using CSS Grid Layout and it works marvelously in local testing. Unfortunately, it seems as if Roll20 does not support any grid-* properties. When I paste CSS in the CSS Styling tab that includes classes with grid properties the character sheet reacts with not loading any of the CSS at all. When I remove these classes everything works again. CSS Grid Layout is extremely useful and supported by the browsers Roll20 supports. It's a perfect fit for the task of making character sheets. If I had to guess there's some parser that is seeing the CSS grid properties and rejecting the entire custom stylesheet because it doesn't recognize those properties. I'm posting this hoping I'm wrong and there's some way of using this great capability, but I don't think I am. :(
1514830986
Jakob
Sheet Author
API Scripter
Grid seems to work for me. I just copied the example from your mozilla.org link and added sheet- to all the classes, and it works in a test sheet.
1514831422
vÍnce
Pro
Sheet Author
I believe Scott C. has used css grid on his Starfinder sheet.  He's mentioned nothing but good things about it.
1514833004

Edited 1514833158
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Css grid works fine. I would guess that you are using Firefox though. There appears to be a bug where Firefox does not properly support grid when updated. I think it must be a corruption of the update or something similar because not all users report it. Uninstall Firefox, then reinstall from a fresh download and you should be good. To see acharacter sheet with css grid in action, hop into my Starfinder alpha game: <a href="https://app.roll20.net/join/2540841/cZqDWw" rel="nofollow">https://app.roll20.net/join/2540841/cZqDWw</a>
1514861940
Carl T
Sheet Author
Ok thanks for the tips. It turned out to be nothing to do with grid or Firefox. Apparently, having a class named {whatever}-parent is a bad thing! It just so happened that that class had my grid layout code. Not sure why that naming is a problem, but once I renamed that things started working.&nbsp;