Today, the working draft of the CSS Grid Layout module was published.

I wrote about this last year voicing my concerns that the proposals do not match a designer’s mental model of how grids – and subsequent layouts – are constructed, and the historical terminology. I wrote an open letter to to the W3C CSS working group, too:

In reference to: http://dev.w3.org/csswg/css3-grid-layout/#core-concepts-of-the-grid

I’m confused as to the need to invent new terminology with regards to grids that have existed for centuries. I’m also a little concerned that the mental model this terminology builds is one more similar to tables and spreadsheets (where these terms could be interchangeable) than to grids and layout.

Specifically on the terminology:

  • Grid Lines are known as Gutters.
  • Grid Cells are known as Modules (or Units – the term is interchangeable). They represent the smallest building block of the grid.
  • Combinations of modules vertically are Columns if they run the full height of the grid.
  • Combinations of modules horizontally are Rows if they run the full width of the grid
  • Combinations of modules both vertically and horizontally are Fields.

There’s a lot of great stuff in this draft, but some of the theory of designing grids has been around for centuries. If we could start to align CSS with existing terminology, and existing mental models of how layout is designed, then all the better.

Just a thought…

For more information on this, I wrote a blog post last year that expands on some of this thinking.

Thanks for your time and consideration,
Mark Boulton

A number of people replied from the group, but a few notable points were discussed:

Tab Atkins responded by saying:

We’re killing grid lines, but more importantly, the grid concept of “gutters” will be added properly, so you can actually have separation between grid cells. (Right now, “grid lines” are just an alternate placement mode - you can place items by their edges rather than by the cells you want them in.)

Which I was pleased to see, but dismayed to see today – a year later – that it was still in the draft. This doesn’t address my concerns over terminology. Basically engineers inventing words for things that have been called something else for, oh, maybe a hundred years.

Bert Bos then replied, beginning with a sweeping statement:

Mark. I think our terminology is based on table terminology (rows, columns and cells) on purpose. Just about everybody is familiar with tables, so building on that shared knowledge makes sense.

I’m not so sure about that. Yes, everyone understands tables because we hacked them for layout in the bad old days. We’ve spent a decade unlearning that only to replace layout with the same broken mental model? Designers understand grids. We understand the terminology, and it’s really not that difficult for other people to learn it, too. I know, I’ve taught them.

Bert went on to discuss my proposal for a better way to do things – more aligned with how designers think about grids, and how we might unite development and theory that’s been around for ages.

And then the discussion pretty much stopped. And it seems the underlying theory of this proposal is still built on nothing more than “people understand tables, so we think this makes sense”. May as well say, “well, people understand spreadsheets, so we’re doing it like this”. If the W3C adopted this stance when they first looked at proposing basic typography for the web, then we’d be in a world of ‘line spacing’ with no ‘ems’ or ‘ens’. But they didn’t! They adopted – largely – good typographic terminology and theory. What happened? And why does layout and grids have to be any different?

There are other issues, too. The proposal combines the idea of layout with the underlying foundation of a grid. To my mind, that’s just confusing. Like separating content from presentation – one of the fundamental principles on which web standards is built – applies to grid design, too. Grids should be abstracted from layout – they facilitate layout, but combining the two words is just potentially confusing for me.

I think there is an opportunity to get this right. The typographic control we have in browsers is generally built on existing, good typographic design theory. There is no reason why layout and grids shouldn’t be either.