Yes, it's possible! But it's up to you to know what is supported and what isn't. I'll save you the research and give you everything I found on CSS Grid in IE11.
If you look at caniuse, IE11 has partial support for CSS grid. But what does that mean? Basically everything from this version of grid is supported... aka: nothing you can rely on if you're used to modern grid.
You'll need a supported CSS preprocessor or prefixer to give you all the polyfills you need to enjoy the awesomeness of grid in legacy browsers.
There is no solution that polyfills everything for you. You still need to know the limitations of grid in IE11 and know what manual polyfills you'll need to write if you want to use methods like
repeat() or props like
grid-gap. You'll also need to explicitly tell each grid item where it should live in the grid, ie: you'll need to add a class to every item and tell it where to start, end/span. (Yes, it's a real pain, but do you want grid in IE11 or not?)
repeat is supported! It's just syntactically different. Instead of
grid-template-columnds: repeat(6, 1fr 100px) you'll have to manually write out
-ms-grid-columns: (1fr 100px) for IE11.
span as in
grid-column: span 1/-1 is not supported.
Grid item positioning. I mentioned this earlier, but it's important to reiterate so you're not pulling your hair out after following everything else I said. Grid items need to be explicitly "placed" in the grid. And, sadly, you can't select each child with
:last-child and so on. You have to create unique classes for each child and tell them where to start and end in your grid.
Another thing to be aware of… by default
display: block behaves differently in IE11. Usually, if you have a parent container with content inside, the parent will by default be the size of the content. In IE11, the parent is by default the width of its respective parent. None of the articles I read mentioned this, which tells me they didn’t actually test in IE11. Or read the specs. But I did for you, so you don’t have to.
grid-gap, too, which is hands down my favorite CSS grid feature, does not get IE11 support. But you get by if you make extra columns/rows to act as your gaps.
grid-auto-columns are not supported, because IE11 can only create columns and rows automatically based on the size of the content it contains in the grid. So if you try to explicitly give a size with
auto rows or columns, it will default to auto.
auto-fit won't work either, because IE11 has no concept of auto placement. Although, there are ways to hack it with autoprefixer.
minmax() will work! Just not with
Shorthand props like
grid won't work, but they will if you write them out longhand.
If any of your grid items are
inline elements, they won't respect the grid. AKA your
a tags. But what most people don't realize is any new HTML5 elements won't be recognized by IE11 and it will see them as
spans and inline them. So you'll need to explicitly displaying them as
clock, such as
Thankfully, normalize CSS does this for you... but check with your compiler or preprocessor to make sure they do.
This is just the tip of the iceberg, read CSS trick's article for even more of what's supported.
Not a fan of manually polyfilling your code? Cool, me too. Try these libraries out...
Now there are a lot of great articles out there already that talk about this, and almost all of them end up with the same solution, use autoprefixer which seems to have polyfills for almost everything...
Almost everything... but there are still some things you have to polyfill manually.
But... I try to avoid adding dependencies whenever possible. So instead, I looked into what I was currently using to see if there was something native I could use.
I'm working out of a legacy codebase that uses a combo stylus and styled components. We're trying to move everything to styled components, so I first looked for polyfills there. Autoprefixer won't work, because it compiles at build time, where styled components are at runtime. Leaving me to rely solely on styled components for a native solution which unfortunately uses
stylis to compile... and doesn't have prefixing for CSS grid... yet?...
I'd say "yet" but the issue has been open for 2 years with no updates. I'm a huge fan of styled components, so that was a big let down.
So I looked for solution in stylus. Luckily, we happen to use
kouto-swiss to do our compiling (and lots of other cool stylus functions) which includes polyfills for grid in IE11... almost all of them. I had to do some testing to see what it actually did, because the docs claimed that it had polyfills for everything, including things that were not supported in IE11, like
Unfortunately, it doesn't tell me what versions of IE11 these were polyfills for... So I did some more digging to see what polyfills were limited to.
Here's what I found...
Turns out... kouto was only adding the
-ms prefix and not actually changing any syntax, or caring if something wasn't supported. Here's a great cheat sheet that is the most up to date version of what's supported on IE11, even with polyfills.
Don't trust your preprocessor to do all the heavy lifting for you. Know what it's doing under the hood and test, test, test!