A Quick Introduction to CSS Grid Layout

2.4 Browser Support

I think CSS Grid is amazing, super powerful, so easy to use, and we now have a proper way of creating layouts with CSS. Now here comes the obvious question, but does it run in IE, Internet Explorer? And the answer to that question is, yes it does. In fact, you probably didn't know this, but it's Internet Explorer that we have to thank for the grid that we have today. Because the very first specification for, or the very first proposal for a CSS Grid Layout was developed by Microsoft and was shipped with the very first or the brand new IE 10, that was back in 2012. So let's take a look at the browser support for IE and Edge. As you can see, globally, CSS Grid Layout is supported by 86.66% of all users. Which is fantastic, considering the fact that it's just a little bit over a year since CSS Grid officially launched. Let's take a look at IE, And Edge. So as I said, Grid shipped with the brand new IE 10, so IE 10 and 11 both supported, as well as a Edge, or the earlier versions of Edge, from 12 to 15. Now here's the catch, these browsers only support the 2011 version of this specification, which is not as advanced as the one we get today in other browsers. As you can see here it says partial support with prefix MS. So Grid works in these browsers, but it only supports an older version of the specification. And this older syntax, let's call it, can still do the explicit placement in rows and columns, but it cannot do automatic placement and sizing. It's a bit limited. Now, for a full list of what it can and can not do, go ahead and check out this great article by Rachel Andrew, you can find a link down below. In here you can find the specific properties and values that work in the IE implementation, and which ones don't work, and the ones that can be enabled by using the Autoprefixer. Now, the new and improved version of Grid, which is considered to be CSS Grid Layout module level one, shipped in March of 2017 in Safari, Chrome, Firefox, and Opera. So you can see that these browsers currently fully support Grid. And because of that, as I pointed out in the beginning, now 86.66% all users globally can now benefit from Grid, which is just fantastic. Now, whether or not you want to use the old syntax to support IE or just use the new syntax and just serve IE like a different layout, is entirely up to you. Personally, if I didn't need to explicitly support these older browsers, I would just use the new syntax. So the concept is pretty simple. For the non-supporting browsers you serve like a simple flow layout with a simple column. And then you can use feature queries at supports to implement Grid in the browsers that support it. So for Internet Explorer and the earlier versions of Edge that support the old specification of Grid, you would simply serve a simple flow layout. And on the newer browsers, like chrome, safari and so on, that do support Grid, you implement the new layout. And by doing that you make sure that the non-supporting browsers still get something. It’s a simplified layout, but still all the information is there. And the newer supporting browsers get a fancier layout. That's basically progressive enhancement, right? Now, if you want to learn more about feature queries, there's a link down below to an article from Web Design Tuts. And that concludes this introduction to CSS Grid Layout. I just covered the basics here. I wanted to give you the minimum amount of information you need to start working with CSS Grid. And I really think you should start working with this. We need to push the web forward in the right direction, and I strongly believe that CSS Grid is a great tool that will help us do that. Please stay tuned on Envato Tuts+ for more advanced content on CSS Grid in the upcoming months. And until then, I wanna thank you very much for watching this course. I'm Adi Purdila, take care.