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.

The CSS Layout Online Workshop

If you are ever baffled by floats, puzzled by collapsing margins or want to understand what is happening under the hood of a framework, this course is for you.

♡ Likes

Clive Walker Anvesh Alex Edwards Roy Ledford Mona 👩🏻‍💻 ge ricci Mauro Reis Vieira Marc Stalfoort Ian De La Cruz Luis Belmonte Díaz Jed Nigel Brewster Kÿle Macqüarrie Jeremy Caudle Luke Minall SEndoh Code & Design John F Croston III jrnorris Michael Stramel Kamil Waheed Søren Kottal Muhammed Mustafa Jon Maskrey Tunde Jackie D'Elia Chroma Waqas Ahmed Waqas Ahmed Vivek Singh η Κατσίκα τ' γείτονα Vivek Singh Andrews Michelle Barker Jamie Lynn Marvin Vásquez Marvin Vásquez Stephen Meehan Samuel Oloruntoba Amit Jakhu Samuel Oloruntoba John F Croston III Samuel Oloruntoba Sathish Paul Mo Afonso Pacifer David S. Pumpkins Trstn ^^_ Darrell Wilson Florian Bougel Thomas Parisot Florian Bougel

↺ Reposts

Anvesh Jeremy Keith Mauro Reis Vieira Clive Walker Nigel Brewster César Vargas-Machuca Michael Bernth Waqas Ahmed Vivek Singh Chelsea Roman Jon Brain

Posted a response? Enter the URL

This site uses Webmention. If you post a response to this post on your own site, and you also support Webmention I'll be notified automatically. If not you can add a link here.