Responsive grid layout: the past, present and future

Responsive web design (RDW) has been with us since Ethan Marcotte coined the term in his seminal A List Apart article in 2010. Flexible, or “liquid”, websites have been around since the beginning of the web, but pre-RDW, most designers seemed to favor the fixed-size site, which slowly got larger and larger as display sizes increased.

It was the arrival of the smart phone and the browser adoption of CSS media queries that made those fixed sites a thing of the past. In the last seven years our approach to responsive grids and layouts has surprisingly not changed all that much, although there are new CSS features coming in the near future that are going to be potentially game-changing.

The original grid is simply a row of left-floated items using percentage-based widths, and at some point, those items can be “stacked”, or essentially lose the float and become full width for smaller devices. In other words, items that are to the left in the row stack on top of items on the right. Case in point:

To this day, I would say most grid-based responsive sites continue to use this approach. But there are many limitations. For one, vertical alignment is essentially impossible. Items also must stack on top of each other left-to-right (or right-to-left if using float: right). If items in a row container wrap to another line (say, a grid of product images), the alignment will get weird if all items are not exactly the same height (which seems a bit backwards in terms of being responsive and all).

But wait! We have Flexbox to the rescue. Flexbox is now well supported, and solves many of the issues noted above. Items can be ordered differently on desktop—the center item can stack on top of the left item for mobile. Flexbox has vertical alignment properties, it flows items to a specific width or automatically, it can stretch containers full height in a row, it can control how spacing between items works, and it can fix your car and bake you a pie. Okay maybe it can’t do those last 2 things, but it can do way more then floats ever could. Here is an example of the items changing order at different viewport widths:

But of course, flexbox is not without its problems. For instance, when you have that wrapped grid of product shots, and you have the gutters between the items (so the first and last in a row are flush against the edges), if there is an odd number of items at the end, you end up with large gaps.

Flexbox is also again meant for a single, one-dimensional grid. The ever-present “layer cake” layout, of row on top of row. It can do vertical rows, but they are still rows and depend on a fixed height.

Where things are getting interesting lies in a new, still unsupported feature of CSS—grids. Actual grids with 2 dimensions. The grid is built both vertically and horizontally, and items can be placed anywhere within this grid, taking up any number of columns or rows and aligning any which way within those containers. Now just imagine this combined with media queries: layouts can become completely different for any device size, with the source order being unaffected. It’s the holy grail of responsive grids.

Currently, the support for grid isn’t within any browser by default, you must specifically turn it on as experimental feature. However, come March of 2017, Chrome, Firefox and Edge will (supposedly) support it by default.

Want to learn more about CSS Grid? This article is a great run down on the syntax with examples.