CSS Grid. One layout method not the only layout method

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.

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.

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’.

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.