CSS Grid and the Future of Web Layouts

Web layouts have always been broken; we've just refined how we break them. Until now. CSS Grid is a paradigm shift where web layouts are concerned, and to take advantage of this new layout module we have to rethink everything we think we know about web layouts.

In the spring of last year I created a First Look course for LinkedIn Learning and Lynda.com to showcase the possibilities of CSS Grid. At the end of that course I said CSS Grid would likely be production ready by the end of 2017. At the time people said I was being too optimistic. Turns out that optimism was warranted: If everything goes according to plan, all modern browsers will have full CSS Grid support by mid-October. That means CSS Grid is ready for production today. So, to get you started right I've created a brand new course called CSS: Advanced Layouts with Grid which shows you how to use CSS Grid to create various layouts, and I'm super excited to see where you'll take what you learn from it.

Why CSS Grid Matters

By their nature, HTML documents are just that: Documents. They start at the top and end at the bottom. Which means if we want to place one part of the document next to another part we have to identify the different parts and somehow place them within the available space, which on the web is the browser viewport. Traditionally we'd do this using tables (which are really for marking up tabular content), float (which is for allowing content to flow around an item in the view), and flex (which is for flexing the contents within a container to take advantage of the available space).

The problem with all these approaches is they work content-out: They are applied to individual items and change their positioning and/or relationship with the adjacent content. Table, float, and flex have no understanding of the overall layout of a view, and can only be used to create layouts by doing weird things like creating layout containers and using negative margins for positioning. Like I said, web layouts have always been broken, we've just internalized that brokenness as the cost of working on the web and learned to treat it as if it were the way it ought to be.

CSS Grid changes all of that. It introduces a layout-in approach to web layouts and allows us to treat any element within the view port as a proper layout area inside which we can position things exactly where we want them to appear. This is fundamentally different from how we've been creating web layouts up until this point, and requires a complete rethink of the entire web design and development process.

First of all, creating web layouts with CSS Grid is absurdly easy. In a generalized way it only requires two steps:

1. Draw a custom grid.
2. Place the items where you want them to appear within that grid.

That's really all there is to it. Gone (for the most part) are the days of wondering how changing the layout of one item will affect another or nesting containers within containers within containers to ensure sections of our layouts float and clear properly. Just draw your custom grid and place items where you want them to appear.

This opens a path to a new world of unexplored layout options for the web, and in my new course I take you on a journey through some of the most immediately practical applications.

Multi-column Grid Layouts

A grid is by definition an area divided into columns and rows so CSS Grid is an ideal tool to create multi-column layouts: Simply define your columns and place the grid items in the column or columns you want them to appear. The actual placement can be done by referring to each column using the column line numbers, by giving the column lines names and referring to them, or by defining grid areas and placing the items within those areas. Whichever path you choose to take, the result is the same: Your items are laid out in the grid without any CSS alchemy.

Grid Nesting

When talking about layout grids its easy to think about a singular grid controlling the entire layout of a view. CSS Grid has no such restriction. Any element (container) in a view can have its display property set to grid, and you can nest as many grids as you like inside one another to create truly dynamic layouts. In my grid-based layouts I typically have at least 3 grids working at the same time; one for the main layout, one for content structure, and one for laying out the main content of the current view. But three is not my limit. I've found that CSS Grid works exceptionally well for creating advanced card-based layouts, and here I'll typically create a grid for each individual card and then a larger grid to lay out all the cards. That may sound like a lot of work, but because CSS Grid is just plain old CSS it's surprisingly easy to implement: Create a rule, apply it to all cards using the same class.

Advanced Interactivity

CSS Grid also simplifies and uncomplicates things we've been doing (or at least tried to do) before. Case in point: Off-canvas navigation.

The principle is simple enough: Place a navigation panel outside the viewport edges, and slide it in when some interaction takes place. The challenge has always been doing this without requiring a huge mess of CSS and JavaScript. CSS Grid makes that possible. The key is to remember a grid has no maximum height or width. In other words we can create a grid that is wider than the browser viewport and slide it in and out of view as necessary. This opens the door to both slide-over and push-in off-canvas navigation using only CSS Grid and some very basic JavaScript.

CSS Grid Is Ready for Production

Any time a new web technology comes along, the adoption rate takes the shape of a lazy upwards curve with full adoption taking years. There are good reasons for this - backwards compatibility, learning curve, cost of refactoring old code, etc - but none of these should stop you from using CSS Grid today.

First of all, CSS Grid is supported in all major modern browsers (with Edge coming online October 17th):

Secondly, Rachel Andrew has published an exhaustive breakdown of CSS Grid fallbacks to ensure every visitor is served with well structured accessible content.

Third, and finally, there is no rule saying "all websites must look exactly the same on all browsers including old ones." In fact we've actively worked against that rule since the introduction of Responsive Web Design in 2010. To move the web forward we need to adopt and use new technologies, and CSS Grid is a revolutionary technology that not only improves our ability to create advanced accessible responsive layouts, but makes that process a lot easier. That means if you can, provide the mobile layout as fallback for older browsers and progressively enhance your layouts with CSS Grid for modern browsers, and if you have to provide a consistent experience, use the fallbacks provided by Rachel Andrew so you can safely serve up CSS Grid to modern browsers.

A year, or maybe two from now, this notion that CSS Grid requires fallbacks to older browsers will be a fleeting memory. Adopting and using CSS Grid today ensures your creations are ready for the near future when grid is the primary layout module for the web. So, go check out CSS: Advanced Layouts with Grid today and join me in exploring the future of web layouts with CSS Grid!

--

Morten Rand-Hendriksen is a Senior Staff Instructor at LinkedIn Learning and Lynda.com focussing on front-end web development and WordPress and a sessional instructor of Interaction Design at Emily Carr University of Art and Design.