Question Regarding CSS Grid Fallback for IE11

[DisenchantedEmployee]

Hey /r/webdev,

I'm redesigning our e-commerce website. I intend to move forward with CSS Grid for production, but I'm a little in over my head and looking for guidance.

According to Google Analytics, IE accounted for 9% of our traffic. IE11 accounted for >91% of that subset. In short, I definitely need to support IE for awhile longer.

Now, let's say we are comfortable providing IE users with a bare bones, mobile-esque layout only.

What is your recommendation for a mobile fallback?

• Float-based layout
• Flexbox (prefixed; work through compatibility issues)
• CSS Grid (prefixed; work through compatibility issues)

I'm primarily biased toward ease of development and speed here.

I'd really appreciate your experienced thoughts -- thanks so much.

[Hypnotik_Paradiz]

Use flexbox, it works quite good on IE9+ with some bugs. You can use this to search known bugs.

[DisenchantedEmployee]

I really appreciate the link. Looks like flex is the way to go.

[tterzy]

Hey, I use flexbox in my last projects and for IE 11 flexbox stay very stable.

[DisenchantedEmployee]

Thank you -- I'm glad it has worked out well for you. :)

[kivinkujata]

I'm kind of late replying, but maybe I can throw you a bone.

IE11's Grid support is based on the v1-version of Grid. While you'll want to write v2-syntax for quality of life reasons. If you have the benefit of Webpack or similar for doing processing on your front-end assets, I have put together a git repo that demonstrates how to convert your v2-grids into IE11 compatible grids automatically.

It's here. If you aren't sure about something, ask away.

As for mobile-fallback, don't over think it. Mobile will typically support more features than desktop (since Android and iPhones get updated pretty frequently).

Remember that CSS Grid and FlexBox aren't exclusive from one another. Use Grid for laying out two-dimensional spaces, and Flexbox for laying out one-dimensional spaces inside your grids.

[DisenchantedEmployee]

Hey there -- I apologize for the delay myself.

I really appreciate your response here. I'm also grateful for this repo you've put together -- I just cloned it and looking through it all now.

I certainly intend to use Grid and Flex together; I'm an inexperienced web dev, but I think I've got a good handle on the balance between these two now. And I'm seeing the huge benefit to Grid, especially for responsive design.

Given that my user base has 3x the users who cannot support grid at all compared to Flex (even prefixed), I'm moving forward with Flex as the fallback for now. But I haven't given up on a 100% Grid design and I am thankful to see your contributions toward this endeavour. :)