IE 11 Not Supporting Grid Layout

HTML & CSS
1

Hi from 8 degrees and sunny York UK,

Cuurrently working through Sitepoints " Designing CSS Grid Layout" course. But whilst in Chrome no problem IE 11 no go :frowning: Bit frustrated to discover on page 1 of the tutorial IE 11 doesnt support it.

(The correct rendering is in Chrome)

So my question is how can IE 11 accommodate grid layout?

Thanks,
David

2

I’d have a read through this article by Rachel Andrew - Using CSS Grid: Supporting Browsers Without Grid

1 Like
3

Hi there Nightwing.

IE only has partial support with the -ms prefix.

Source:-

https://caniuse.com/#search=grid

coothead

4

Oh dear, ok I need to back up a bit… I am a CSS learner and i just wanted to get to a stage where i could learn how to layout elements on a page as Ive always struggled with it :frowning:

I came a across a grid tutorial in Sitepoint premium so i need to ask to develop my competence in page layout (Considering I’m not aiming to be a commercial front end developer) are there broadly speaking the following approaches to layout on a page:

Floats
Flexbox
& Grid?

I just want to commit to one approach that will build my confidence, perhaps Grid is a step too far?

Thanks,
David

5

Learning grid will help you in the future and will eventually be supported by all modern browsers. IE11 usage is very low these days so is not a great issue if you supply a fallback or simpler layout without going too far overboard.

You can achieve the same layout in flex so you could use @supports and give ie11 a flex layout.

You can forget about floats (other than for floating things or for very simple structures) but your list misses out my favourite layout option and one I have used on hundreds of sites over the last few years and proved to me the most robust of all. The display:table properties are supported right back to IE8 and can produce many solid grid type layouts with ease.

These days I still tend to use display:table but will quite often use flex also. Grid is good but overly complex for simple layouts. The future is definitely grid shaped so it is worthwhile to practice and construct layouts using grid especially if its for your own projects. You should probably concentrate on learning flex first and then grid (or both).

Remember though that even if you use grid you are still going to want to use flex or other layout methods inside the grid sections.

2 Likes
6

I would not call it a step too far. There are MANY techniques for layouts ( grid or otherwise) and while some don’t require bleeding edge /developing attributes they may make the CSS more convoluted and require extra HTML markup. There are always many way to skin a cat, as they say.

As a resource, I would recommend: https://caniuse.com, before you start coding. It lets you know support status for pretty much any CSS selector/property, and requirements (such as vendor prefixes). This way you can make an informed choice as to which method to use to build your layout.

Hope that helps :slight_smile:

3 Likes
7

Thank you everyone for your help, i’m jumping into a flex box for now :slight_smile:

8

People seem to recommend flex and CSS grid because they are modern and simple and structured. I like to use CSS grid in 2D for the overall page layout and flex for small things (you don’t even have to define rows you can wrap) . I got this method to combine both on the internet. One main principle I had from a book to make a good layout was to avoid using wrapping divs to wrap layouts. And this principle really helped me.

If you have a start up company with a selling website, you probably want maximum browser support.
As can be seen in the known issues tab of flexbox, it has “limited” support, in particular for IE11.

IE11 still has many users. In this chart of 2 years ago, they evaluate that 25% of all browers run IE11. Only 2 years ago.
https://mspoweruser.com/net-market-share-internet-explorer-11-still-leading-the-browser-market/

I had to support a maximum of browsers, I would use:

  • use display: table (this solution requires knowledge but it uses only what the browser allows, no dependency)
  • Bourbon neat or an equivalent framework to generate a well supported grid. As you can see in the example the generated CSS only uses margins.
    https://neat.bourbon.io/docs/latest/
    If you use a library, make sure it will still be supported in the future. For example, compass susy was a reference for grids. But it is now deprecated. That is a reason why one would want to use display: table.
9

Why use 2 year old data? Personally, be looking for something far more current than that as a general rule. Getting more specific, I’d suggest looking at the data associated with the market, or organisation, you’re trying to serve - it could be light years away from what is happening on the global stage.

2 Likes
10

The figure given for IE11 on caniuse.com is 2.78% globally, which is somewhat different. But as @chrisofarabia says, it’s important to know your target audience, not just to rely on general statistics.

1 Like
11

Microsoft Internet Explorer 8.0: 16.05 %

:rofl:

2 Likes
12

That will be because of all the government departments still using XP.

1 Like
13

2 years is a long time in computing.

14

OK. I found it very hard to find recent and reliable data on the browser market. And often Internet Explorer is grouped into one name.

This could be estimated on any big website by logging the User-Agent headers of the HTTP requests.

For the question at hand, should we move on with flex since most browsers support it, it depends on 2 things:

  • known issues in IE 11 as reported on the website caniuse.com. Then it depends on how important it is to support IE11.
  • other issues. Maybe even if flex is supported, its performance would not be optimal in old browsers.
  • as other said before in several threads on this forum, there is no best grid, each grid framework can be more suited for various reasons independently of support. The main reasons would be performance, clarity, functionality.
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.