This past June several Elliance team members had the pleasure of attending Web Design Day 2016. While many of the speakers presented interesting new ideas and techniques one seemed to stand out of the crowd for me, Jen Simmons’ ‘Revolutionize Your Page: Real Art Direction on the Web’. Her talk focused on upcoming web standards that will have great impact on how we design and develop web page layouts. You can watch a similar talk here.
One of the most exciting features she covered was CSS Grid Layouts.
What is a CSS Grid Layout? It is a browser native feature for making 2 dimensional grids on the web. In the past, after the introduction of CSS, we used tables to create layouts, this was followed by the use of floated elements and most recently we’ve been dabbling in flexbox.

Of course CSS Grid Layouts are not ready for production, but Chrome, Firefox, and Opera are testing this new standard that you can use today (after altering some developer settings).

Like Jen Simmons, several developers have gotten out ahead of the pack and have made wonderful guides and even books on the subject.

Here are some of my favorite:

• Chrome Developer – Get on the CSS Grid
• CSS-Tricks – A Complete Guide to Grid by Chris House
• A Book Apart – Get Ready for CSS Grid Layout by Rachel Andrew
• The Experimental Layout Lab of Jen Simmons by Jen Simmons

There are CSS Grid Layout polyfills currently in development to help us in our backwards compatibility browser support when this working standard becomes fully supported.