loading...

CSS Grid in IE11: It's Possible! And Not as Hard as You Think

eblairmckee profile image Blair McKee ・4 min read

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.

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.

Or you can stick around and I'll sum it up for you.

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

But span as in grid-column: span 1/-1 is not supported.

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-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 props like fit-content() and 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 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.

Posted on by:

eblairmckee profile

Blair McKee

@eblairmckee

UI Engineer @ Rally Health Chicago

Discussion

pic
Editor guide
 

You might be interested in inline.style

<div class="grid-template-columns:repeat(4,25%);">...</div>

Start with this HTML.

.grid-template-columns\:repeat\(4\,25\%\)\;{grid-template-columns:repeat(4,25%);}

Hacss generates this CSS rule.

.grid-template-columns\:repeat\(4\,25\%\)\;{-ms-grid-columns:(25%)[4];grid-template-columns:repeat(4,25%);}

Autoprefixer applied to the Hacss output yields this.

 

Thanks Blair, this is great information!

 

Thanks for this article!
Small typo: "So you'll need to explicitly displaying them as clock" as in display: clock;? :D

 

Typo: grid-template-columnds: repeat(6, 1fr 100px)