Display: Grid – The Future of Responsive Grid Layouts

Brief History

The history of front-end design strategies is a wild thing to study. We started with linear page-outlines, largely consisting of a wall of text and hyperlinks. We later got clever and began co-opting <table> to give us more control over page layouts. We should have all been smacked for doing it, but it was the convention at the time.

When tables began to be more of a nuisance than a solution the community started leveraging floats, and working to define their design requirements in terms of laterally-shifted elements that sat next to one another. Of course that too presented a new set of problems – we had to perform an embarrassing amount of CSS acrobatics to clear our floats, or achieve something as simple as the Holy Grail of layouts (which was trivial with <table>).

Things got better; tried and true conventions and approaches were packaged up into wildly popular frameworks like Nathan Smith’s 960 Grid System, and appeared to have solved all of our problems for a short while. But the fact remained that while we had comfort, it came at the cost of meaningless additional markup, and cryptic classnames. The DOM was getting noisy.

Introducing Grid Layouts

Browser vendors and standards bodies took it upon themselves to start working on alternative, more reliable solutions. With the release of Internet Explorer 10 we saw the first major browser implement a CSS-based Grid System.

For the first time, we are able to author our content as it ought to be, without nesting it in arbitrary ad-hoc divs to give ourselves a little advantage in CSS. We can now turn simple markup into easily-manipulated sophisticated layouts.

No more absolutely positioned elements, pointless margins or padding, etc. CSS Grids completely liberate you – the designer – from having to wrestle with the layout engine to get the effect you want without forcing you to compromise on your markup or CSS.

Defining Columns and Rows

The CSS is remarkably very simple to grok; and if you’ve ever spent any time in the past wiggling through tables, you’ll find much of the code very familiar-sounding. We start by setting an element up as our grid container. In the code above, I used the body element:

body {
  display: -ms-grid;
}

Because this technology is still experimental, you can only access it by using the -ms- prefix. Once we have set our display mode to -ms-grid, we have to define our columns and rows. This too is very straightforward:

body {
  display: -ms-grid;
  -ms-grid-rows: 100px 200px 1fr;
  -ms-grid-columns: 1fr 150px;
}

This results in a grid that has three rows, and two columns. Think of a table that has three table rows, and two table cells in each row. Our first row is 100px tall. Our second is 200px tall. Lastly, our third row is the full remaining fractional value; so whatever is left over after 300px is taken away, that will be the height of our third row.

We took a similar approach for our columns. Our first column takes the remainder of the horizontal space left over after 150 pixels have been given to our second column. At this point, your design will be mangled beyond recognition. Until you specify where each element ought to reside, they will all be tossed into row one, column one – do you even grid, bro?

Placing and Sizing Grid Items

Once you have your rows and columns defined, it’s trivial to move your elements around from any column or row to another. For instance, suppose we wanted to move our <h1> element into the first row, and have it span both columns:

h1 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
}

It’s so straightforward that it requires no explanation.

Not only can we specify which column and row our element resides in, we can also instruct our element to span additional columns and rows to better align our grid contents as we see fit.

Your main bag of tools consists of the following properties:

Property Description
-ms-grid-row target row
-ms-grid-row-align horizontal alignment
-ms-grid-row-span number of rows to span
-ms-grid-column Target column
-ms-grid-column-align Vertical alignment
-ms-grid-column-span Number of columns to span

The alignment properties accept values such as start, end, center, and stretch. In a left-to-right layout, start will align the element to the left while end will align it to the right. Stretch will cause the element to consume all available space in the grid location. By default grid items are stretch, so don’t freak out if an image initially looks wonky.

Responsive Grids

With this much control over the layout in our CSS, you can imagine the amount of flexibility we have when we add media queries into the mix. All of a sudden, we can rearrange everything when in portrait mode as opposed to landscape, or desktop as opposed to mobile.

Below I created a simple example that shifts the layout around above and below the 400 pixel mark. In the left image we have more of a “mobile” experience, and in the right we’ve rearranged the elements (without touching the markup, woot) to present a wider experience.

image02image00

Here are the two media queries. Note the small amount of changes needed to completely restructure things.

body {
  -ms-grid-columns: 50% 50%;
  -ms-grid-rows: auto auto 1fr;
}

@media screen and (max-width: 400px) {
  nav  {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
  }
  h1 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    -ms-grid-row-align: center;
    -ms-grid-column-align: center;
  }
  img {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  article {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }
}

@media screen and (min-width: 400px) {
  nav  {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
  }
  h1 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
  }
  img {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
  }
  article {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-row-span: 3;
  }
}

I have purposefully kept the examples here relatively simple, but only because I don’t feel this requires a great deal of explanation to get my point across – grids are freaking amazing.

In this short introduction we’ve seen how to create a grid container, assign arbitrary numbers of columns and rows with various dimensions. We placed elements, moved them around, and dynamically updated their properties to completely reconfigure our layout.
In the midst of all this excitement, there is a bit of bad news (isn’t there always?).

The Caveat

As of writing this the only browser to currently support CSS Grids is Internet Explorer 10. This means all of the code from above will have no effect in Chrome, Firefox, Opera, or any of the other major browsers. Check caniuse.com/css-grid for most recent changes.

If you are interested in developing Windows Store Applications with HTML, CSS, and JavaScript, you can definitely put this feature into your bag of tricks to ensure your app looks and feels the way you expect.

Although you can’t put it to much use on the open web, it is still good to begin developing a familiarity with the technology as the W3C Grid Layout spec is in the works and will hopefully find its way to Candidate Recommendation in the future.

Need More Direction?

If you’re looking for some assistance with any of the above content, or even with IE’s implementation of CSS Grids, you have a few places you can go to get assistance. Stack Overflow is almost always my first suggestion, though it currently doesn’t have much content around IE’s CSS Grids implementation (likely to change in the near future).

Another great place to look would be the @IEDevChat account on twitter. Additionally, if you want to get the attention of the User Agents (of useragents.ie) you can tag your tweet with #IEUserAgents. This notifies a developer experienced in Internet Explorer to come and assist you. Sweet deal, right?

On a Mac? Don’t have Internet Explorer 10? You’re not out of luck – you can test all of these features using http://browserstack.com. Additionally, you can download a free virtual machine with IE10 from http://modern.ie. I happen to be working on this demo in a virtual machine, and the performance is stellar on my MacBook Air in Parallels.

That’s it. Go be awesome.

5 thoughts on “Display: Grid – The Future of Responsive Grid Layouts

    1. Jonathan Sampson Post author

      It makes sense that they would be leading the charge behind CSS Grids; remember that they rolled out support for Native Applications on Windows 8 being authored with HTML, CSS, and JavaScript. Can you imagine trying to design a native application using floats? *shivers in terror* Hehe.

  1. Rob

    I wish when people write articles like this, they would just put the Caveat right at the beginning and save everyone from wasting their time reading something that can really be made use of today…

    1. Jonathan Sampson Post author

      I’m sorry if I left you frustrated; I pointed out that IE was the first browser to support this feature, and I only used -ms- prefixed properties throughout the article; I thought the hints would have been there early on in the article, and only provided the more explicit caveat to cover all my bases.

      You can use this today though if you’re developing native applications on Windows 8. You could also look at the polyfills that exist online (as one comment pointed to) to help other browsers along.

      Hope this helps.

Comments are closed.