I create my mobile version of pages with Flexbox, so if the user's browser doesn't support it, they see the full featured mobile view. Progressive enhancement.
https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
You'd write two versions, one for browsers which do support grid and one for the ones which don't.
Jen Simmons has written excellent tutorials on doing fallbacks and explaining how we can use css grids nowadays: https://hacks.mozilla.org/2016/08/using-feature-queries-in-c...
And also has a YouTube channel where she explains a lot on how to deal with css grid in the wild: https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
If the browser doesn't support css grid, the mobile, single column version with flexbox is fully featured, and is loaded first because the css grid is kept in @media queries.
Like the sibling comment mentioned, you can use @supports, however if you use `display: flex` for mobile and `display: grid` for desktop, the grid will never load in old browsers anyways.
This works out pretty well for me personally in 99% of use cases. If you want to use CSS grid as well for mobile, you'll need a more powerful @supports solution, however.
That said, at least this css grid garden has a elegant fallback. Most CSS grid sites don't. Or worse, they fall back to 'mobile' sites.
You could modify Firefox source code to let you run whatever add-on you wish. With Firefox whatever changes you want are limited only by your willingness to implement them (either by doing the work yourself or working with others to get those changes made).
You can even distribute the improved Firefox variant browser to others and help the community. Hacker News recently had a story about some hackers doing exactly this with a variant they call Librefox. Other examples of Firefox variants include IceCat and the Tor Browser.