CSS Grid is one of the biggest enhancements for layouts the web has seen in a long time. We are finally able to create native two-dimensional layouts in the browser. It makes your HTML more concise and your CSS more robust. In this article we’d like to share how we were able to reimplement our application layout in CSS Grid, what benefits we saw and how we were able to even support IE11 🎉.

Starting with the basics

Our application is an admin UI for merchants managing their enterprise commerce businesses. The layout we use is the classical holy grail layout and consists of:

App Bar: With a fixed height of 45px while taking up the full width and not scrolling with the page content.

With a fixed height of 45px while taking up the full width and not scrolling with the page content. Menu: Should be below the app bar, have a width of 200px and take up the full height, and should also not scroll with the page content.

Should be below the app bar, have a width of 200px and take up the full height, and should also not scroll with the page content. Content: Should take up the remaining width and height, and should be scrollable.

Implementing the above described layout in CSS Grid is easy as 🍰.

The resulting layout

Learning the new properties

Let's take a look at the new CSS properties we used. If you are already familiar with those feel free to skip to the "Making it work in IE11" section.

First of all we use display: grid; to make the .app element a grid container. As soon as we do this all direct children of .app become grid items.

Now we are ready to define our layout. It consists of two columns and two rows:

Identifying rows and columns in our layout.

grid-template-colums: 200px 1fr; defines that we want two columns. The first will be 200px wide and the second will take up one fraction unit (fr) of the remaining horizontal space. Fraction units work just like flex-grow values in flexbox. They represent a fraction of the available space in the grid container.

Similarly, grid-template-rows: 45px 1fr; defines that we want two rows. The first row will be 45px tall and the second row will take up the remaining vertical space.

In CSS Grid columns and rows are also referred to as grid tracks. The lines that surround the tracks are called grid lines. These grid lines also get numbers assigned automatically:

A grid track is the space between any two lines on the grid. After defining tracks Grid then gives us numbered lines to use when positioning items.

Grid tracks are used for defining columns and rows. Grid lines are used for placing grid items in the grid.

By default CSS Grid will automatically place each item in one grid cell. If you want one grid item to take up more than one cell—like our App Bar that should take up two cells horizontally—you need to explicitly position the grid item using grid-column and/or grid-row .

Looking at the image above we can identify the grid lines we need to tell the App Bar to stretch from and to.

/* start at grid line 1 and stretch to grid line 3 */

grid-column: 1/3;

This tells the App Bar to start at grid line 1 and go until grid line 3.

Notice that in the full code above we are telling the app bar to go until the grid line -1 instead of 3. -1 always refers to the last grid line. This makes the App Bar always take up the full width no matter how many columns we add later 🎉.

If you want to learn more about all the new terminology and properties head to the MDN CSS Grid Layout documentation or The Complete Guide to CSS Grid Layout. These are great place to get started 📖.

Note that we are not explicitly placing the App Bar in the first row, though. Also we are not explicitly placing the Menu and Content. CSS Grid automatically places these items for us ✨.

Making it work in IE11

We have now seen how simple it is to create layouts using CSS Grid. Although browser support for CSS Grid is already great in general, there are a few extra steps we need to take in order to make our layout IE11 compatible. Here is what we did.

First of all, the IE implementation relies on the -ms vendor prefix. Using Autoprefixer with grid mode enabled will take care of most of the work.

Sadly, the IE10 implementation of CSS Grid — which is also used in IE11 — doesn’t support auto-placement:

There is no auto-placement behaviour in IE10 implementation. This means that you need to position everything rather than use the autoplacement ability of grid. –Rachel Andrews

This is a bummer! We need to fallback to explicitly placing everything on the grid by using grid-column and grid-row . This works fine for our use case since we only have a couple of items to place on the grid. If we were to dynamically fill our grid with items we would be out of luck with the IE implementation.

During autoprefixing the grid-column property gets transformed to IEs -ms-grid-column-start property. However, compared to grid-column it only supports the starting value—like the name suggests. In IE we need to explicitly define how many columns the grid item should span using the -ms-grid-column-span property as you will see in the code sample below.

IE requires you to manually specify start and span values using specific properties. Autoprefixer sadly doesn't do this transformation automatically so we have to take care of it ourselves.

Another quirk we’ve encountered in IE11 is that for some reason the <main> element is not supported as a grid child. The solution is to fallback to a <div> with role="main" , which keeps the HTML5 semantics and allows us to place the main container in the grid in IE11.