CSS Grid and IE11

The other day I decided to finally use CSS Grid in one of my personal projects. There's so much hype about it - at least in my social media bubble - that I already felt like I was lagging behind completely because I wasn't using it on a daily basis. Finally it was my turn to be all modern and cutting edge.

The excitement

It turned out to be really intuitive to use. Learning it didn’t take too much time, at least for the basic use-case that I needed it for. Great!

I wanted to implement a basic layout with header, side bar, main content area, another content area below and a footer. With CSS grid you can write something like this:

header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.half-content {
  grid-area: half;
}

.full-width-content {
  grid-area: full;
}

footer {
  grid-area: footer;
}

.wrapper {
  display: grid;
  grid-template-areas: 
    "header header"
    "sidebar half"
    "full full"
    "footer footer"
}

The values for the template area show on first glance that it's a two column layout. The header, full content element and the footer span over two columns and the sidebar and half content area occupy one column each.

I really liked how the layout is made so visually easy to understand. That's how CSS should be seeing that it's a language invented to purely cater for our visual pleasure! It makes complete sense and you see how the page layout works on first glance. If I had a more complicated layout with more columns and more different widths of elements, it would still be pretty easy to understand and to change.

I used a media query for a smaller screen size in which I changed the layout to a one column layout with the sidebar content below the half content. So easy!

The downer

Unfortunately it didn’t work in IE11. Yes, I did check "caniuse.com" before I implemented it and IE11 had a green indicator. OK... the indicator was a different shade of green from all the other indicators for modern browsers. The website highlighted some caveats for IE11 but who wants to know the details when they're excited about using a new technology? I wanted to see green and I saw green.

But when I finally got round to testing the website on IE11, the full width content area was covering the whole height of the page. What?! Why!?

Ah, I must be missing some vendor prefixes. But I looked and there were none for IE!

Turns out, IE11 only understands the “old” implementation of CSS Grid which doesn't have the wonderful visual layout syntax. I started to read an old version of the W3C specifications and looking for old blog posts. But then I lost interest in learning the old version of a new technology.

I ended up deleting all my CSS grid implementation and added an angry emoji to my git commit message (which made me feel a bit better). Now I'm using a mix of flex-box layout and margins, sprinkled with a few "display: nones" here and there. So annoying!