Not OP, but it is usually done by using support tags:

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

I build all my mobile layouts with flexbox, so they are usually one long column, and content collapses into the grid from CSS media queries.

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.