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.
TLDR;
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?)
What's Supported in IE11
Good news! 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)[6] for IE11.
What Isn't
span
span as in grid-column: span 1/-1 is not supported.
Child positioning
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 :first-child or :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.
Know your IE11 wierdness
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
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.
everything auto
grid-auto-rows and 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-fill and auto-fit won't work either, because IE11 has no concept of auto placement. Although, there are ways to hack it with autoprefixer.
But minmax() will work! Just not with auto-fill or auto-fit.
shorthand
Shorthand props like fit-content() and grid won't work, but they will if you write them out longhand.
inline elements
If any of your grid items are inline elements, they won't respect the grid. AKA your span and 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 main, header, footer, etc.
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.
Put your preprocessor to work
Not a fan of manually polyfilling your code? Cool, me too. Try these libraries out...
Autoprefixer
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.
If you are okay adding another dependency, there's a lot of content on autoprefixer, which does seem to be the tried and true solution (for almost everything).
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.
Styled Components
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.
Stylus
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 grid-auto-flow.
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-position
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-column
- grid-template-rows
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.
Takeaways
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!
Latest comments (4)
You might be interested in inline.style
Start with this HTML.
Hacss generates this CSS rule.
Autoprefixer applied to the Hacss output yields this.
Thanks for this article!
Small typo: "So you'll need to explicitly displaying them as
clock" as indisplay: clock;? :DTypo:
grid-template-columnds: repeat(6, 1fr 100px)Thanks Blair, this is great information!