Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Using CSS Grid: Supporting Browsers Without Grid

When using any new CSS, the question of browser support has to be addressed. This is even more of a consideration when new CSS is used for layout as with Flexbox and CSS Grid, rather than things we might consider an enhancement.

In this article, I explore approaches to dealing with browser support today. What are the practical things we can do to allow us to use new CSS now and still give a great experience to the browsers that don’t support it?

What Do We Mean By Support? Link

Before deciding how you are going to support browsers without grid support, it is worth working out what you mean by support. Support might mean that the site has to look absolutely identical in all the browsers on your list. It might mean that you are happy for some finishing touches not to be available in all browsers. It might mean that you are testing these browsers but are completely happy for them to receive a much simplified experience.

A linked question is how do you come up with your list of supported browsers? Even for a brand new website, this shouldn’t need to be a guess. For most businesses today, a new website won’t be the first site they have ever built. You probably have some analytics you can look at to see the browsers in use, although you need to take care that they are not skewed by a site that is entirely mobile unfriendly for example. People won’t be visiting the site on mobile if it is impossible to use on a small screen!

If you don’t have any relevant analytics you can look at data on Can I Use31, where you can import the data for your location.

On the Can I Use website you can import usage data for your location2
On the Can I Use31 website, you can import usage data for your location. (Large preview4)

It is also worth keeping the site goals in mind here too. For example, a site hoping to attract visitors who live in emerging markets such as India will want to ensure the site works well in browsers used in those countries.

Is It Just Old Browsers I Should Worry About? Link

A the time of writing Edge, Chrome, Firefox, Opera, Safari, iOS Safari all support Grid Layout.

IE10 and IE11 have support for the original spec with an -ms prefix. In terms of old browsers you are looking at:

  • Internet Explorer 9 (or IE 11 and below if only considering the new spec)
  • Edge 15 and below
  • Firefox older than version 52
  • Safari and iOS Safari older than version 10.1
  • Chrome older than version 57
  • Samsung Internet older than version 6.2

However, as mentioned in the last section, these popular desktops and mobile browsers are joined by browsers more commonly used in emerging markets. These browsers haven’t yet adopted grid. For example, if we take a worldwide view UC Browser comes in at 8.1% of traffic — the third most popular browser in the world. If you happen to live in the USA or Europe, it’s possible that you may have never heard of it.

5
(Image source6) (Large preview7)

UC Browser does not support Grid Layout. It is also a browser optimized for lower powered devices, but also for users in areas with expensive, often metered data. This is an important thing to consider as we begin to plan a strategy for support.

Is There A CSS Grid Polyfill? Link

When first encountering CSS Grid, an obvious question is, “Can I use a polyfill?” Unfortunately, a magic polyfill for your entire layout is unlikely to be forthcoming or a great idea to use even if there were such a thing.

Grid does things that are pretty much impossible with older layout methods. So, in order to replicate Grid in browsers that don’t have support, you would need to do a lot of work in JavaScript. Even on a well-resourced computer, with a fast rendering engine that is likely to give you something of a janky experience as heights are calculated and items positioned. As we already know, the browsers that don’t support grid are older, slower browsers or browsers most often found on lower powered devices in emerging markets. Why would you force a bunch of JavaScript onto those devices?

Instead of searching for a polyfill, consider how using Grid Layout can actually provide a better experience to those browsers that don’t support it. Grid will allow you to create complex layout experiences for supporting browsers with minimal CSS, while still offering a good experience to those browsers without support. Yes, it will be a little more work than just throwing a polyfill at the problem, but by doing so, you are ensuring that support means providing a good experience, rather than making the site looking the same the most important goal.

Providing Support For Browsers That Don’t Understand Grid Layout Link

So, how do we provide support that is tailored to the device and browser in use? It turns out that CSS has the answers for you.

Browsers Ignore CSS They Don’t understand Link

The first part of the picture is the fact that browsers ignore CSS they don’t understand. If a browser that doesn’t support CSS Grid, comes across the grid-template-columns property, it doesn’t know what it is and so throws that line away and continues.

This means that you can use some old CSS, for example, floats or display: table-cell to provide a grid type layout for older browsers, just as you would in the past. The browsers that do not support Grid Layout will use this layout and ignore all the grid instructions. Browsers that do support Grid Layout will continue and discover the grid instructions and apply those. At which point we need to consider what happens if an item using another layout method becomes a grid item.

New Layout Knows About Old Layout Link

Defined in the specification is exactly how Grid behaves if you have elements in your page positioned by other layout methods.

Items that are floated or that use the clear property, which then become a grid item, no longer exhibit any floating or clearing behavior. As if this was never applied. Remove all of the properties applied to the class .grid in this next CodePen, and you can see how we have floated all of the items and cleared the third one. However, once we are in Grid Layout this is ignored.

See the Pen display: grid overrides float and clear8 by rachelandrew (@rachelandrew20139) on CodePen211410.

The same is true for inline-block. The value inline-block can be applied to the child item, but as soon as the parent has display: grid the inline-block behaviour will no longer be applied.

I often use CSS display: table-cell when I need to create a column layout and also align items in non-supporting browsers, as the vertical-align property works when you use display: table-cell.

If this is new to you, read The Anti-hero of CSS Layout — "display:table”3311. I wouldn’t suggest you use this today as your main layout method, but it can be very helpful as a fallback.

When you use display: table-cell to create columns, CSS will create what is known as anonymous boxes. These are the missing parts of the table — a table cell in a real HTML table will be inside a tr element, and that will be inside a table element. The anonymous boxes essentially fix up these missing parents. If your table-cell item becomes a Grid Item however, this happens before the boxes are generated and so once again the item will act as if the CSS tables display had never happened.

The vertical-align property does not apply once in Grid Layout either and so if you use it in a CSS tables layout or with inline-block you can safely ignore that and use Box Alignment for Grid Layout. You can see a layout that uses display: table-cell and vertical-align overwritten by Grid Layout in this next CodePen.

See the Pen display: grid overrides display: table-cell, and vertical-align12 by rachelandrew (@rachelandrew20139) on CodePen211410.

You can also use Flexbox as a fallback, if you have used the flex property or individual flex-grow, flex-shrink or flex-basis properties on the item these will be ignored once it becomes a Grid Item.

Finally, don’t forget that Multi-column layout can be used in some cases as a fallback. For example, when laying out a list of card components or images. It will display items in columns rather than across the row but in some circumstances can be useful. You apply column-count or column-width on the container to make it a multicolumn container, if you then apply display:grid the column-* behaviour will be ignored.

Feature Queries Link

In the majority of other layout methods, we target the individual items rather than their container. For example in a floated layout, we have a set of items that we have given a percentage width and then set to float: left. This causes them to line up next to each other. As long as we don’t end up with more than a total of 100%, we can make something that looks like a grid.

.grid > * {
  float: left;  
  width: 33%;
}
Floating items and giving them a width gives us the appearance of a grid15
Floating items and giving them a width gives us the appearance of a grid. (Large preview16)

If we then turn that layout into a CSS Grid Layout, we create a grid on the parent. The only thing we apply to the items is an instruction as to how many columns to span.

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: 100px;
  grid-gap: 20px;
}

In our old layout we have floated items with a size applied, in our new layout those items become Grid Items, and typically we don’t want to give those items a size, as they will get that information from the grid tracks that they span.

It is here that we come to an issue with simply being able to override one layout method with another. In the example of a floated layout where the items have been given a percentage size, once that item becomes a Grid Item the size becomes a percentage of the Grid Area it is in and not a percentage of the overall container width. You can see this by using the Firefox Grid Inspector to highlight the lines — the items are now squashed to one side of the Grid Cell.

In a Grid Layout the width becomes a percentage of the track17
In a Grid Layout, the width becomes a percentage of the track. (Large preview18)

This is where Feature Queries can help. Feature Queries act much like a Media Query, instead of checking for the width or orientation of a device, we check to see if the browser supports a CSS feature.

In our example of a floated layout that we want to turn into a grid layout, we only need to override one thing inside the Feature Query — we want to set the width back to auto.

See the Pen display: feature queries demo19 by rachelandrew (@rachelandrew20139) on CodePen211410.

How much overwriting of CSS used for nonsupporting browsers you need to do depends on how much you have decided to create a different layout for those older browsers.

The IE10 And 11 Version Of Grid Layout Link

While Edge has now updated to the modern grid layout, IE10 and 11 only have support for the early version first shipped with a -ms prefix in those browsers. The Grid specification that we know of today came originally from Microsoft. So far from being unhappy about this old implementation, we should be glad they kickstarted the process and gave us Grid in the first place. You can read more about the story in the article The Story of CSS Grid, from Its Creators2922.

You might decide to offer IE10 and 11 a fallback experience based on a floated or other layout type as described above. This will work well, as will using Feature Queries, which are not supported in IE10 and 11. As long as you use these to overwrite your older methods checking for support, then creating the version for supporting browsers, IE10 and 11 will continue to use the older method.

You could however make use of the -ms-grid version to create a fallback method. However this prefixed version is not the same as modern Grid Layout, it was the first version and experimental version. Things have changed in the five years or so since it shipped. This means you can’t just use autoprefixer to add the prefixes, that approach will probably leave IE10 and 11 users with a worse experience than if you do nothing at all. Instead, you need to create a layout using this different and more limited spec.

The key points to note are as follows:

  1. There is no auto-placement. You need to place each item on the grid using line-based positioning.
  2. The grid-template-areas ascii-art method of positioning is not part of the implementation.
  3. There are no grid gap properties.
  4. Instead of specifying start and end lines, you specify a start line and the number of tracks to span.

You can find a full breakdown of all of these properties in my blog post, Should I try to use the IE implementation of Grid Layout?3223

If you have a large number of users with these browsers then you may find that this old spec is helpful. It is definitely worth knowing it exists even if you only use it to solve a couple of small issues that are real showstoppers for you.

Why Bother Using Grid If I Have To Support These Browsers? Link

If you have non-supporting browsers in your list, and you have to offer them an identical experience to supporting browsers then I would indeed question whether to use Grid Layout, or any new CSS. Use the methods that work. That approach is still perfectly valid.

You might still consider using Grid Layout with a high level of fallback if you know that within the short-term it is likely that you will be dropping a bunch of those browsers from the “must be identical” list. Especially if you know the development you are doing now will have a long shelf-life. You could then lose the fallbacks at a later date and only use the Grid version.

However, support for you may mean that it is possible for non-supporting browsers to get some level of simplified experience, and there are things you want to do with Grid Layout that are essentially impossible without it. That’s the time to use Grid Layout and design a good non-grid experience for those browsers.

Testing Fallbacks Link

A final note on testing these fallbacks. The only real way to test your fallbacks is to have access to browsers that do not support CSS Grid. One way to do this, without buying a stack of extra computers, is to download the Virtual Machines offered by Microsoft24. You could then test using a version of Internet Explorer without support.

You could download UC Browser onto a phone, or use the desktop version25 on Windows or in a Virtual Machine.

There are also tools such as BrowserStack3126 which give you access to remote Virtual Machines running a whole range of browsers. These services aren’t free, but they can save you a lot of time setting up VMs for testing.

BrowserStack gives access to many different browsers and operating systems27
BrowserStack gives access to many different browsers and operating systems. (Large preview28)

I have seen people recommend switching your Feature Query to test for something that doesn’t exist — such as testing for support of display: gridx. This will work reasonably well. However, you do then need to put all of your Grid code inside the Feature Query Block, rather than relying on the fact it is ignored by browsers that don’t support it. You could easily end up with a false positive result by not realizing that some Grid code had wound up outside of a Feature Query. Even if you are using this method for quick checks, I would highly recommend doing some testing on actual browsers too.

Further Reading Link

I’ve rounded up the URLs referenced in this article and also some additional resources to help you navigate your own path to supporting browsers while still taking advantage of new layout. If you have come across any good resources, or particularly tricky issues, add them to the questions. Grid Layout is still new to all of us as something we can use in production, so there are bound to be some unanswered questions we can take a look at.

(il)

Footnotes Link

  1. 1 https://caniuse.com/
  2. 2 https://www.smashingmagazine.com/wp-content/uploads/2017/11/can-i-use-import-data-large-opt.png
  3. 3 https://caniuse.com/
  4. 4 https://www.smashingmagazine.com/wp-content/uploads/2017/11/can-i-use-import-data-large-opt.png
  5. 5 https://www.smashingmagazine.com/wp-content/uploads/2017/11/StatCounter-browser-ww-monthly-201610-201710-large-opt.png
  6. 6 http://gs.statcounter.com/
  7. 7 https://www.smashingmagazine.com/wp-content/uploads/2017/11/StatCounter-browser-ww-monthly-201610-201710-large-opt.png
  8. 8 https://codepen.io/rachelandrew/pen/jamLjw/
  9. 9 https://codepen.io/rachelandrew
  10. 10 https://codepen.io
  11. 11 https://colintoh.com/blog/display-table-anti-hero
  12. 12 https://codepen.io/rachelandrew/pen/NwjaKp/
  13. 13 https://codepen.io/rachelandrew
  14. 14 https://codepen.io
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2017/11/floating-items-large-opt.png
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2017/11/floating-items-large-opt.png
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2017/11/grid-inspector-large-opt.png
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2017/11/grid-inspector-large-opt.png
  19. 19 https://codepen.io/rachelandrew/pen/vWmeOE/
  20. 20 https://codepen.io/rachelandrew
  21. 21 https://codepen.io
  22. 22 https://alistapart.com/article/the-story-of-css-grid-from-its-creators
  23. 23 https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
  24. 24 https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
  25. 25 http://www.ucweb.com/desktop/
  26. 26 https://www.browserstack.com
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2017/11/browserstack-example-large-opt.png
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2017/11/browserstack-example-large-opt.png
  29. 29 https://alistapart.com/article/the-story-of-css-grid-from-its-creators
  30. 30 https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/
  31. 31 https://www.browserstack.com
  32. 32 https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/
  33. 33 https://colintoh.com/blog/display-table-anti-hero
  34. 34 https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks
  35. 35 https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/
  36. 36 http://gridbyexample.com/learn/2016/12/24/learning-grid-day24/
  37. 37 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement

↑ Back to top Tweet itShare on Facebook

Rachel Andrew is a web developer, writer and speaker and one of the people behind the content management system, Perch. She is the author of a number of books including The New CSS Layout. She writes about business and technology on her own site at rachelandrew.co.uk.

  1. 1

    Great article, Rachel! This makes me feel better about how I’ve approached trying to introduce CSS Grid in an environment where we have to support IE11.

    Edge actually ended up being the more troubling one because of it’s kind of support for @supports.

    I did end up using Flexbox over Float, though, as that was easy enough for our example.

    3
    • 2

      I actually got around the Edge issue with @supports by adding a parameter for browsers that support display: -ms-grid;.

      0
  2. 3

    Very informative article Rachel. Just as Eric wrote in his comment, I would also use Flexbox for the fallback system.

    2
  3. 4

    I am one of those users forcing you as a developer to use some kind of fallback if you want me to see your web site in some kind of coherent fashion. I am still using an obsolete browser on an obsolete operating system. I note that my system has updated to Firefox 52 which does support css grid, IE and Chrome are now stuck in the past, and will no longer update. When I can afford it, I will replace this system, but til then, this is what I have to use.

    I am in the process of learning about css grid and hope to write code which will translate well to up to date browsers and to us old browsers too. This new code has presented an interesting learning experience and I hope to adapt it to my old system if possible. I just hope that most of the web sites I do visit have an adequate fallback for my viewing.

    In the end, it all boils down to displaying your content for the end user, the technology you use to do this may enhance the end user experience or it may not. As a developer, don’t penalize the end user for not using the latest technology available.

    Al

    4
  4. 5

    I have been learning-by-doing WordPress theme development as my spare time project for the past several years. Inspired by @mor10 courses in Lynda.com, I have developed few themes and I have used some in my own personal sites (1, & 2).

    Inspired by your grid by example, Jen Simmons lab & others posts, I have been practice learning CSS grid layout since earlier this year. After Morten Rand-Hendriksen’s article earlier this year, I decided to apply CSS Grid in my new WordPress theme projects too. After some trial & errors, I was able to apply CSS grid in my current theme project LabreGrid. I found CSS Grid was much easier to learn than floats.

    I am a big fan of post format and use extensively use in my personal blog site. While learning to design post format with different full-width background, I had to spend time trouble shooting to make it work properly for all screen sizes.

    In this LabreGrid-wide theme project (demo here), I wanted to have standard post and as well as posts in all format types styled & displayed differently. Initially I tried with the fallback code for site-main container [max-width: 45em; margin: 0 auto;] commonly used for centered-single-column display. Because of the margin property in fallback code, post format background property does not seem to work on larger screens. When I removed the margin property it works OK in Firefox, Chrome & Safari but NOT on my latest MS Edge. The theme is being used in this blog site (under construction)

    If there is interest I could write & share my experience in applying CSS Grid in my latest WordPress themes. A big Kudo to Mor10, Rachel & Jen Simmons for inspiration!

    0
  5. 6

    Trevor Robertson

    November 16, 2017 11:14 pm

    Alternatively, you can use this PostCSS plugin. It enables you to use the power of CSS Grid (and simplifies it as well), while also supporting IE11 without the need to write any specific fallback code in most cases. https://github.com/sylvainpolletvillard/postcss-grid-kiss

    0
  6. 7

    It really does depend on what you need to support, what you choose as the fallback. In Perch we support back to IE9, and with it being a complicated UI, there needs to be a reasonable level of fallback. Other projects I’m using a flexbox fallback in general instead. This is why it is really worth checking what you mean by support and what you need to support before making the decisions.

    1
  7. 8

    John Flickinger

    November 20, 2017 3:00 pm

    If you’re developing with cross-browser compatibility in mind and have an enterprise level website where you need to support IE 10+, what is the benefit of using grid and also a fallback for IE? It seems like a lot more markup, styling, and time would be spent on both the grid version and fallback version instead of just using flexbox until you no longer need to support older versions of IE (pre-Edge). It seems like Grid would be used just for the sake of using Grid in this case.

    I’m not sure I understand why you would want to do both instead of one version that works across all supported browsers.

    1

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top