2 ms·

Use CSS grid with Flexbox for fallback. I create my mobile version of pages with Flexbox, so if the user's browser doesn't support it, they see the full featur

• zamalek 8y ago
  Curious how you manage this. Do you use feature detection and then apply a class to <body>?
  • fgkramer 8y ago
    Not OP, but it is usually done by using support tags: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports 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-css/ 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 https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag
  • androidgirl 8y ago
    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.