CSS Grid. One layout method not the only layout method

I am having a lot of fun answering questions as people start to figure out CSS Grid Layout. In doing so it has started to become obvious that many people are expecting the CSS Grid Layout specification to be the one true layout to rule them all.

There are things that I think would be good candidates for additions to the specification, however some frequent requests don’t really fit the layout method at all. A good example is the belief that grid should enable the type of layout achieved by Masonry when auto-placing items.

Masonry layout

A Masonry layout where blocks fit themselves into space horizontally and vertically

This layout isn’t a two dimensional grid. A two dimensional grid has strict rows and columns, even though some things might span multiple tracks or be aligned inside an area, the basic areas follow the strict lines of the grid. I’ve created three demonstrations which will perhaps shed light on the issue, and also why people are confused about this. All require that you are using a browser with grid layout enabled.

Grid auto-placement

In this first example I am creating a flexible grid, with a flexible number of columns using the minmax() function. The child items auto-place themselves onto the grid one in each cell.

See the Pen 1. Auto-placement by rachelandrew (@rachelandrew) on CodePen.

In this second example I am adding some rules to my items, though still relying on auto-placement. I have also set the grid-auto-flow property to dense so grid will backfill gaps left in the grid as it places larger items. At first glance this looks a bit like masonry, however as you can see the items are all in strict rows and columns, some are just spanning multiple tracks.

We also end up with content out of DOM order with this method, which will be a problem in many cases.

See the Pen 2. Auto-placement with dense packing by rachelandrew (@rachelandrew) on CodePen.

For Masonry what you actually would need is for auto-placement to look at both height and width and be able to create ‘rows’ that also push items up into the area of the row above to fill in gaps. You can get something that looks very much like that if you control the layout by positioning the items, as shown below. However you then can’t just throw a chunk of content at a grid and let it do the layout – which is what people want in ‘Masonry’.

See the Pen 3. Positioned items by rachelandrew (@rachelandrew) on CodePen.

I think the fact auto-placement existed coupled with the things you can create when explicitly placing items lead people to the conclusion that auto-placement can magically do the masonry layout. However it’s not something grid was ever designed to do, as it isn’t a two dimensional grid layout.

Grid is for the creation of two dimensional grids. So you use Grid when your layout needs a two dimensional grid. That might be to contain the layout as a whole, or it might be to display a form or a set of images or some other component. The grid specification contains some clever stuff to enable these grids to be responsive, but they are always grids. If you can’t draw a set of boxes and put the bits of your design neatly into them, it probably isn’t the method you are looking for.

Your other tools haven’t gone away

Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.

Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.

You can only make these decisions however if you understand each of the specifications well enough to know what it was designed for. To that end, it is a very good time to brush up on your general CSS layout skills. Once you know what each method was designed to do, it is much easier to look at a layout and spot the parts that would be best built using a particular approach. You will also be able to recognise those things, like the Masonry style layout, that perhaps are not yet solved by CSS alone.

I’ve just returned home from the CSS Working Group meeting and I’m so excited about some of the stuff that is coming into CSS right now. I want to see people take this stuff and do really interesting things with it, but before you can be creative with a medium, you need to understand the medium. That means understanding new things like Grid, Flexbox and how to use interesting techniques such as display: contents. However it also means having a proper understanding of floats, of positioning, of all those things we’ve been hacking around with for years. What are they actually designed for and how do we reframe the way we work with them in the light of newer methods?

This holistic view of layout is very much becoming a theme for my talks and writing this year. For if you are expecting Grid to solve all of your layout problems, then you will be disappointed. If you instead look to the interplay between methods, there is much to be excited about.

63 Comments

Anvesh July 28, 2017 Reply

The video from my talk at #patternsday – Perch, Patterns and Old Browsers buff.ly/2u4BReD

Jeremy Keith July 28, 2017 Reply

The video from my talk at #patternsday – Perch, Patterns and Old Browsers buff.ly/2u4BReD

Mauro Reis Vieira July 28, 2017 Reply

The video from my talk at #patternsday – Perch, Patterns and Old Browsers buff.ly/2u4BReD

Clive Walker July 28, 2017 Reply

The video from my talk at #patternsday – Perch, Patterns and Old Browsers buff.ly/2u4BReD

Nigel Brewster July 28, 2017 Reply

The video from my talk at #patternsday – Perch, Patterns and Old Browsers buff.ly/2u4BReD

César Vargas-Machuca August 28, 2017 Reply

The grid-gap properties are having a name change – you can find out more here #aeachi buff.ly/2wCYigk

Michael Bernth August 28, 2017 Reply

The grid-gap properties are having a name change – you can find out more here #aeachi buff.ly/2wCYigk

Waqas Ahmed August 28, 2017 Reply

The grid-gap properties are having a name change – you can find out more here #aeachi buff.ly/2wCYigk

Vivek Singh October 27, 2017 Reply

It is possible to use the IE10/11 version of grid layout as a fallback, more here #viewsource buff.ly/2gNehT2

Chelsea Roman October 27, 2017 Reply

I’m at @viewsourceconf today speaking about CSS Grid Layout. You can find my slides and code here buff.ly/2yOmtcH

Jon Brain October 29, 2017 Reply

Thoughts on Grid and Masonry layouts #ViewSource buff.ly/2yOAeIF

Leave a Reply