An Introduction to the CSS Grid Layout Module

This article was updated in July, 2018 to reflect improved browser support for CSS Grid Layout.

As web applications become more and more complex, we need a more natural way to do advanced layouts easily without hacky solutions that use floats and other less burdensome techniques. An exciting new solution for creating layouts comes with the CSS Grid Layout Module.

In this introductory tutorial, I’ll introduce you to this relatively new CSS feature, I’ll discuss the current browser support, and I’ll show you using some examples how the CSS Grid Layout Module works.

What is the CSS Grid Layout Module?

The core idea behind the Grid Layout is to divide a web page into columns and rows, along with the ability to position and size the building block elements based on the rows and columns we have created in terms of size, position, and layer.

The grid also gives us a flexible way to change the position of elements with only CSS without any change to the HTML. This can be used with media queries to alter the layout at different breakpoints.

Browser Support

Before we can dive more into Grid Layout, it’s important to take a look at the status of browser support.

Support in modern browsers

As you can see from the image above, the great news is that CSS Grid is supported by the latest version of most browsers.

If you click the Show all option on Can I use, you'll see how far back this support goes. Because Grid is such a new feature, backwards compatibility doesn't extend far, so you need to bear this in mind if there's a chance your audience is using an older version of a major browser.

However, hovering over each version number on Can I use shows the rate of global usage for that version. At the time of writing, the latest version for each browser not to support Grid has a usage of far less than one percent.

Internet Explorer … and other non-supporting browsers

The first proposal of Grid Layout was developed by Microsoft, and IE10 shipped with an -ms prefixed implementation. If you take a look at support on Can I use, you’ll see that both IE10 and IE11 support CSS Grid … with the caveat that they only support the older version of the specification. Bummer. That's not going to change. But what will change is the usage for those browsers. In July 2018, IE11 usage is down to around 2% globally, and IE10 usage is about a tenth of a percent.

Can I use also indicates that a few other browsers don't support grid layout. These include Opera Mini and Blackberry Browser. Opera Mini is the only one with significant usage, but because it's a mobile browser, you'll most likely want to target it with a mobile-friendly, non-Grid layout anyway.

Fallbacks for non-supporting browsers

Given that the vast majority of browsers in use today support CSS Grid, it's a shame not to use it on the basis that some browsers may not support it. There are various options for using Grid and providing perfectly adequate fallbacks for non-supporting browsers.

Perhaps the simplest option is to provide a simple "mobile first" layout. This will be perfectly adequate for mobile devices that don't support Grid and also desktop browsers like IE.

Another option is to use more sophisticated fallbacks and overrides to produce similar results to Grid, as outlined by Rachel Andrew.

And a polyfill is also available to provide a working implementation of the Grid Module for browsers that don't support it natively. Note that this might be a bit out of date now.

The post An Introduction to the CSS Grid Layout Module appeared first on SitePoint.

by Ahmad Ajmi via SitePoint