CSS Grid in IE11: It's Possible! And Not as Hard as You Think
Tags: css, grid, ie11
Published: 2020-02-04 13:56:38

---
title: CSS Grid in IE11: It's Possible! And Not as Hard as You Think
published: true
description: 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`. 
tags: CSS, grid, IE11
---

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](https://caniuse.com/#feat=css-grid), IE11 has partial support for CSS grid. But what does that mean? Basically everything from [this version](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) of grid is supported... aka: nothing you can rely on if you're used to [modern grid](https://css-tricks.com/snippets/css/complete-guide-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](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/). 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](https://css-tricks.com/css-grid-in-ie-faking-an-auto-placement-grid-with-gaps/) 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 `span`s 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](https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/) 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](https://github.com/postcss/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](https://medium.com/@elad/supporting-css-grid-in-internet-explorer-b38669e75d66) on [autoprefixer](https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-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](https://github.com/styled-components/styled-components/issues/2078), 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](https://github.com/thysultan/stylis.js/issues/119) 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](http://kouto-swiss.io/)) 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](http://kouto-swiss.io/#mixins_vendors) 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](https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/) 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!