Changes to the Grid Spec and taking on Multi-Column layout

Last week I was in Paris for the CSS Working Group face to face meeting. At the CSS WG we have two kinds of meetings. Every week there is a teleconference, which members call into. In addition we have a face to face meeting a few times each year, where as many of us as are able sit in a room together and go through various issues. If you want to know what is discussed at either of these then it is all minuted in IRC, the logs are posted to www-style after the meetings. In addition if we discuss a particular GitHub issue, the discussion is logged against that issue with any resolution.

In this post I wanted to detail a couple of issues likely to be of interest to readers of this blog.

Grid specification changes and news for Flexbox

At the meeting we discussed a range of related issues, these stemmed from a request that the grid-gap properties not be reset by the grid shorthand. You can read the issue here #1036, which also includes the full IRC log of the discussion.

The resolution for the original issue is that the grid shorthand will be changed to not reset these properties. Furthermore, the gap properties were discussed and it was resolved to undo the original resolution that made specific grid-gap properties (grid-column-gap, grid-row-gap and grid-gap) in favour of column-gap, row-gap and a gap shorthand. There is an issue raised here 1696 although the actual resolution is detailed in the discussion of 1036 above.

These new properties will be detailed in the Box Alignment specification, and be available to other layout modes where they make sense. Multi-column layout already has column-gap, the only difference being that if you do not set a value for column-gap you get a gap (the spec suggests 1em), gaps in other layout methods default to 0.

The good news with regard to making these more generic gap properties is that other layout method they make obvious sense in, is Flexbox. So ultimately browsers may support gaps in flex layout, meaning that we won’t need to do weird things with negative margins to get a neat gap between flex items.

Given that people have already implemented grid layouts using the grid-gap properties it is likely that browsers will alias the old names to the new for the foreseeable future. Right now the spec, nor browsers have been updated but it is worth keeping an eye on that change being made. You could of course use both properties now just as you do for vendor prefixed properties – browsers will ignore column-gap and use grid-column-gap for now.

Co-editing Multi-column Layout

The Candidate Recommendation of Multi-column layout was published on the 12 April 2011, and the specification has languished since then. There are a whole bunch of issues that haven’t been added to the draft of the spec. If you have ever used Multicol you will know there are a good deal of interoperability issues right now.

I care about multicol for a number of reasons. We don’t have anything else that does this sort of thing in CSS, and being able to take a bunch of stuff and split it into columns is sometimes useful on the web. I also have an interest in CSS as used for print – where specifications like multicol are used far more frequently. Therefore, I volunteered and have been accepted as a co-editor of the specification, to see if I can help get things moving again for the spec and ultimately for the interop issues that mean people can’t use it reliably.

It will be the first spec I have edited, and work begins with a good bit of archeology through the old mailing list archives to dig out all of the old issues and resolutions and make sure we have those listed. I can then start to work through them. How much time I have really depends on balancing this work with work that pays the bills. All of my work on CSS is voluntary and self-funded right now – including travel to meetings. I feel as if in the past couple of years I’ve found the stuff I am best at, and that is generally useful to the web. I’d love to have the time to just work on specs like Multicol, write tests and dig up interop issues as I’ve started doing for Grid Layout, write about and teach this stuff – without it all being a side project of the work that pays the bills!