CSS Grid in IE: Debunking Common IE Grid Misconceptions

Share this:

This is the first in a three-part series all about how to use CSS grid in a way that will work not only in modern browsers but also in Internet Explorer (IE). Imagine writing CSS grid code without having to write a fallback layout! Many of us think that this is some far off future that is many years away. If the only thing holding you back from that reality is IE11 (check caniuse.com), then you’re in luck! That day is today! Or at least it will be when you finish reading this series. 😉

Article Series:

To start off, this first part is going to debunk some common misconceptions around IE11’s native grid implementation.

In Part 2, I’m going to blow the lid off the myth that using CSS grid in IE11 is super hard. No more crappy fallback layouts for IE11!

In Part 3, I’ll show you a cool flexbox technique that I use for creating simple auto-placement grids. These fake auto-placement grids have fixed pixel-based grid gaps that line up perfectly with ones created using real CSS grid. They work perfectly in IE11, are fully responsive, and updating their column count based on screen width only requires changing a single width value in a media query.

That’s enough intro’s lets get started on these misconceptions!

IE does have an implicit grid

In CSS grid, the explicit grid is the one that you manually define with all of the grid-template-* properties. The implicit grid is how the browser handles the placement of cells that are placed outside of the explicit grid.

When using CSS grid in modern browsers, the implicit grid is pretty obvious since the grid will continue to create and place grid cells automatically on new rows without having to define them. IE doesn’t have auto-placement, so it’s easy to assume that IE doesn’t have an implicit grid. It does though — you just need to be a bit more explicit when it comes to using it.

The most common use case for using IE’s implicit grid is using it to generate your rows for you. If you want all the rows in the grid to have their height dictated by the height of their content, you do not need to bother defining -ms-grid-rows (the IE version of grid-template-rows). The rows will automatically be generated for you in IE when placing your grid cells.

An important thing to note though is that modern browsers have access to the properties grid-auto-rows and grid-auto-columns. These properties allow you to control how the browser handles the size of rows and columns in the implicit grid. IE has no concept of these properties. IE’s implicit rows and columns can only ever be sized as auto.

IE has repeat functionality

Do not fear! There is no need to write out 1fr 20px 12 times for your precious 12-column grid (IE doesn’t have native grid-gap support). IE comes pre-packaged with full repeat() functionality. It’s just hiding behind a different syntax.

The modern syntax for repeating values in columns and rows is repeat(12, 1fr 20px) meaning, "repeat the 1fr 20px pattern 12 times." The IE version of the syntax is (1fr 20px)[12]. The IE version has identical functionality, just a different syntax.

Other than syntax, there is only one difference between the way modern browsers and IE implement the repeat() function. Modern browsers added the auto-fit and auto-fill keywords to the function. Since IE doesn’t support auto-placement, those keywords are pretty meaningless to IE so avoid using them.

minmax() is natively supported in IE

minmax() is a CSS sizing function that is exclusive to CSS grid (at the moment, anyway). Its functionality is pretty self explanatory. You provide it a minimum value in the first parameter and a maximum value in the second parameter. The column or row that this is applied to is then able to shrink and grow between those two values as the space available to it increases and decreases. Try resizing the codepen below to see it in action.

People often think that this awesome little feature isn’t supported in IE but it is in fact natively supported. I’m guessing this is due to at least one of these two reasons:

It’s cool functionality and they think IE can’t have cool things like this because IE sucks.

Everyone has seen this magical code snippet and had their dreams shattered when they realised that it wouldn’t work in IE: grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );.

(If you have never seen that snippet before, watch this short video and prepare to have your mind blown.)

Since the magic snippet doesn’t work in IE, people probably assume that nothing in the snippet is IE-friendly. In reality, the only reason why the code snippet isn’t replicable in IE is because IE doesn’t support the auto-fit keyword and auto-placement.

min-content and max-content are both 100% IE-friendly

IE has full native support for both the min-content and max-content values.

min-content is a keyword value that will shrink the column/row down to the minimum possible width that the content can shrink down to. If applied to a column, this essentially means that the column will be the width of the longest word.

max-content, on the other hand, will grow the column/row up to the maximum possible width that its content takes up, and no further. If you have ever set white-space: nowrap on a large section of text, this will appear very similar.

I wasn’t expecting IE to support these values mainly because of reason one under minmax(). I was happily surprised when I was proven wrong while researching IE11 grid support. In combination with minmax(), there aren’t many grids that a modern browser can make that IE can’t handle (as long as the grids don’t involve auto-placement).

fit-content() is not IE friendly but...

fit-content() doesn’t work natively in IE. 😢

Fortunately, fit-content() is kind of a shorthand syntax and when you write it out the long way, IE does support it! 🎉

The long way to write it is by applying auto (or more specifically, minmax(min-content, max-content)) to the column/row in the grid template, then setting max-width: [value] on the child element.

Here is an example of how you might use the fit-content() function in a modern browser:

What fit-content() is basically saying here is, "make the middle column take up the maximum possible width of its content (i.e. its max-content value) up until it reaches 300px at which point, don’t grow any larger unless forced to."

Note that this is not a full-proof method of replicating fit-content() in IE. If there is another grid cell that has content that takes up more width than the max-width setting of the other cell, the grid column will grow to fit the larger cell. It will not be clamped at 300px like it would with fit-content().

While I'm on the subject, I should clear up a common misconception around the fit-content() function itself. The misconception is that the column (or row) that it is applied to can never exceed the value that you provided the function. This is not the case. If a column is set to a width of fit-content(300px), and a grid cell inside that column is set to a width of 400px, the column width will be 400px, not 300px as many people might expect.

IE auto != Modern auto

The auto value in IE behaves a bit differently than auto in modern browsers. In IE, auto strictly equals minmax(min-content, max-content). A column or row set to auto in IE can never shrink any smaller than min-content. It also can never grow any larger than max-content.

Modern browses treat the auto value a bit differently. For the most part, when the value is used on its own, they still treat auto like minmax(min-content, max-content). There is one small but critical difference though: auto in modern browsers is able to be stretched by the align-content and justify-content properties. IE doesn't allow that.

When auto is used for sizing columns in a modern browser, auto behaves more like 1fr if there isn’t enough content to fill the column. IE does not. IE will always shrink the column down to the size of max-content.

Modern browser auto width columns with lots of content in one cell. Columns are different widths.

IE:

IE minmax(min-content, 1fr) columns with lots of content in one cell. Columns are equal widths.

FYI, minmax(min-content, 1fr) is essentially 1fr and 1fr and does not equal auto. I also tried minmax(min-content, 100%) in IE but that just resulted in the same looking grid as using 1fr. As far as I can tell, it’s not possible to replicate the modern browser auto functionality in IE.

There is another critical difference between IE and modern versions of the auto value though. Since the IE version of auto explicitly equals minmax(min-content, max-content), auto cannot be used in minmax() expressions. minmax() cannot be used inside another minmax() function so auto is disqualified.

Modern browsers are a bit more nuanced. They recognize that auto can mean different things in different contexts. If used on its own, it essentially equals minmax(min-content, max-content) but with the added ability to stretch. When used as a max value, auto is identical to max-content. When used as a min value it essentially equals min-content.

If, right now, you are vowing to never use auto in your grid templates ever again, you may want to rethink that. There are only three circumstances where auto will behave differently between modern browsers and IE. Those are:

auto is being used in grid-template-columns without an fr unit in the same declaration.

auto is being used in grid-template-rows without an fr unit in the same declaration and the height of the grid is greater than the height of its grid cells.

auto is being used in a minmax() function.

That's it! Those are the only times when auto will behave differently in IE to how it behaves in modern browsers. auto is much easier to write than minmax(min-content, max-content) so it's not really worth condemning it over a few little browser inconsistencies that are easily avoidable.

So what have we learned?

IE does have an implicit grid.

IE supports repeat functionality.

minmax(), min-content and max-content are all natively supported.

fit-content() isn’t supported but you can work around it with auto and max-width settings.

IE auto is not equal to auto in modern browsers.

Don’t get the grids out just yet though. There are still a lot of things that you need to know before you can start safely implementing IE grids into your websites. Make sure to stick around for Part 2! I will be showing you everything you need to know to safely build sites for both IE and modern browsers using only CSS grid. Best of all, there will be no more need for crappy fallback layouts!

Keep in mind that IE is a legacy browser that hasn’t been updated since 2013. The fact that it works with Grid at all is amazing. MS Edge has full support for Grid around the same time it landed in Chrome, Firefox, and Safari.

I don’t understand why you would want to support IE. If someone is still using IE then you are looking at a very small, and probably financially embarrassed, group of people. I can think of so many other coding problems I’d rather work on.

Yikes. Besides the big reason for most of this, working at a job in which the provided computers use an old operating system/browsers, thinking of users who use older equipment as embarrassing is dangerously elitist. It’s saying I only care about users who are just like me.

Government is the biggest reason for me. I work in Canberra (capital city of Australia). Practically all of the decent paying work here comes from government clients.

Governments tend to have lots of really old software that doesn’t play nice with modern browsers. IE11 tends to be set as the default browser in governments for this reason. They also tend to be made up of lots of not very tech savvy people.

If you have to use IE11 to do your work and you aren’t a tech savvy person and every link you open from emails opens in IE11, then you are probably going to use IE11 for everything. If you are a developer building an intranet for a government client, then you are probably looking at a 90%-99% IE11 user base! Think you can not support IE11 then?

If you are building a public government website, the client will probably end up looking at it a lot in IE11. You can tell them to look at it in Chrome but someone, somewhere in the chain of command, will look at the site in IE11, see the layout is crap, and then demand you fix it. It can be a tough sell breaking the “every browser needs to look the same” idea that clients have in their heads. Not everyone can pull it off.

Another big reason would be e-commerce sites. IE11 browser usage is still at 2%-3%. If you are giving 2%-3% of your users a crappy experience, that translates to thousands of dollars worth of lost revenue.

I probably should have made a point to mention this stuff at the start of the article :/

I work for a company making a B2B product for film & television companies. At least one of our major clients has IE as the browser for company computers. They aren’t “financially embarrassed” in the slightest, and I suspect the “very small” group isn’t so small when corporate IT departments get involved; upgrading those systems takes wayyyyy longer than we’d like. (I shudder when I remember how long we had to support IE8 because companies were still on Windows XP and literally couldn’t upgrade IE anymore.)

Public websites perhaps can get away with no IE11 support anymore. However, if you’re writing something for an intranet then IE11 is around for as long as it’s getting security patches, which is probably until 2022 (Windows 8 & Server 2012 R2 end of life)

We write medical records software and as much as I’d like to drop IE support that’s just not feasible. I’ve wanted to take advantage of grids as it would really simplify a good chunk of our layout so this article has given me plenty of food for thought.

The product I work on is used by top financial investors and Banking institutions in UK and North America.
These people are exactly the opposite of what you’d define “financially embarrassed” and are probably the ones that handle your money in your day to day transactions.

IE is the second most used browser on our platform.

Am i happy about this? Of course not. Do I have better problems to solve? I sure do!
Detailed articles like the one above are invaluable exactly for that reason.

I want to solve coding problems using shiny new features such as grid, and I am grateful there are people who share their experience on how to do it without disrupting the users activity on our platforms.

I’m a bit confused with this repeat syntax for IE11.
Writing -ms-grid-columns: 1fr (1rem 1fr)[4]; is considered as a syntax error by scss-lint. The [4] part is unexpected…
I couldn’t find any clue how to disable the “syntax” linting. Plenty to disable a specific rule, but as for the syntax, nothing.
Any idea someone?

Thanks for taking the time to write this post, it’s really great to know that it’s possible to provide support for IE.
It’s currently a bit hard to scan the article and get a sense of what is and isn’t supported – do you think you would be able to provide a summary table of what is supported, what isn’t, and if any workaround exist?
Something like:

I’ve tested some of these things out, but unfortunately the so-called ‘repeat’ functionality doesn’t work in IE 11 on Windows 7 (I have it running in Virtual Box). It all just collapses.
Not being able to use this + the fact you can’t add gaps makes it effectively unusable for the projects I’m involved in. We have new developers and interns coming in all the time, most of them with very little knowledge and having to be brought up to speed with the starter themes we use internally to produces sites quite fast.
So any systems we use have to be robust, at least a little intuitive, easy to read and easily fixable cross-browser. I was hopeful when I started reading the article but it’s still very clear to me that the state of CSS grid is long way off for this way of working. It’s open for the more experienced devs quick enough in their work to spend the extra time making their own custom grid-stuff but that’s about it.

It sounds to me like you tried to make use of auto-placement in IE. IE doesn’t support auto-placement. That doesn’t mean that the IE implementation of CSS Grid is useless though. If you have a known number of cells in a known number of rows and columns then the IE implementation can be quite useful.

I was hopeful when I started reading the article but it’s still very clear to me that the state of CSS grid is a long way off for this way of working.

Don’t give up hope yet! This is only part 1 out of 3. By the end of Part 2 you (and all of your junior devs) will be able to use CSS Grid in IE quite easily.

Thanks to the explanation about auto in IE and modern browsers I solved my problem with responsiveness in IE11. I just changed auto to 1fr (which in my case works perfectly) and now my layout is shrinking nicely when I shrink browser window. Earlier I thought that it was min-content problem. Now I will be experimenting with repeat.

Thank you for this article and I’m waiting for part two and three. I will surely learn something new.

This series could not have come at a better time. I spent ~an hour yesterday searching for best practices in making a custom css-grid based grid system IE compatible. To be honest I’m still not sure how to do that with the info provided in this article, but I’m hoping article 2 and 3 in the series will answer that question.

Thanks so much for writing this article! This information has really got me experimenting a lot more with CSS Grid both at work and in my personal projects, and realizing the amazing power that the feature has. I can’t wait for Part 2! When do you expect to be finished with it and post it?

I do have a quick question that I’m having issues with. I have a simple layout using -ms-grid-rows: 75px 1fr 85px, but IE 11 is not respecting the rows, and they end up overlapping at the top of the page. Do you have any ideas for this? I did use Autoprefixer to get the CSS syntax.

This comment thread is closed. If you have important information to share, please contact us.

Related

How do you stay up to date in this fast⁠-⁠moving industry?

A good start is to sign up for our weekly hand-written newsletter. We bring you the best articles and ideas from around the web, and what we think about them.

👋

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like.