Last November I posted to this blog about the three years I had spent experimenting with the Grid Layout specification It’s now over 6 months since that post, so I thought I would do a quick update.
Major changes to the specification
In November 2015 we had just seen the grid-column-gap and grid-row-gap properties make it into the spec along with their shorthand grid-gap. There have been a number of additional changes to the specification since then. This post deals with the changes posted in the latest Working Draft published 19th May 2016 and changes made since the publication of that draft.
Many of these changes are most of interest to the people implementing CSS Grid in browsers, however there are some notes that we developers will find interesting.
Rewrite of subgrid
The big change to note in the May Working Draft is the changes to subgrid. In the previous draft subgrid was a value of grid-template-rows and grid-template-columns. This means that you could specify that either the rows or the columns (or both) became a subgrid. This would mean that a nested grid could use the grid defined on the parent in a single dimension or both dimensions.
In the May Working Draft subgrid becomes a value for display. To create a subgrid on an item that is a direct child of a grid, you use display: subgrid. The big difference there is that you now have to have a subgrid in both dimensions – rows and columns. You will need to know what your subgrid looks like when planning your overall layout. I wrote in detail about the implications of this change in April, you can also see some examples in that post although to date no browsers have shipped subgrid support of any variety.
minmax() notation
There are a couple of notes in the change log about minmax() notation. If you haven’t encountered this before it’s an interesting concept. Essentially minmax() means you can set a size that a grid track will not be smaller than, along with a size it won’t grow larger than.
For example if I create a grid with three column tracks, I was the first track to never be smaller than 200 pixels but also to stretch to take up any leftover space. The other two tracks I want to remain at 200 pixels wide no matter how much available space there is. To achieve this I would create a grid as shown in the CodePen example using:
grid-template-columns: minmax(200px, 1fr) 200px 200px;See the Pen Grid by Example 31: simple minmax() example by rachelandrew (@rachelandrew) on CodePen.
In my post on the differences between grid and flexbox, I use this method along with auto-fill to create a grid that contains as many columns as possible in the width of the container.
Specification updates and issues
While I have mentioned the May Working Draft above, that is not where the most up to date specification can be found. If you want to look at the latest version of any specification in development then you need to look at the Editor’s Draft. This is the in progress version of the spec and in the case of Grid is receiving very frequent updates.
See the Grid Editor’s Draft here.
You’ll find many changes in this draft when compared to the Working Draft including a clearer introduction setting out the difference between Grid and Flexbox. You can see other significant changes in the change log.
You can also take a look at the current issues as raised in GitHub. You can see any parts of the specification where questions are being asked – and comment if you have thoughts.
The next step for the specification will be for it to move to Candidate Recommendation status. The description of this status is as follows:
A Candidate Recommendation is a document that satisfies the Working Group’s technical requirements, and has already received wide review. W3C publishes a Candidate Recommendation to
- signal to the wider community that it is time to do a final review
- gather implementation experience
- begin formal review by the Advisory Committee, who may recommend that the document be published as a W3C Recommendation, returned to the Working Group for further work, or abandoned.
- Provide an exclusion opportunity as per the W3C Patent Policy [PUB33]. A Candidate Recommendation under this process corresponds to the “Last Call Working Draft” discussed in the Patent Policy.
Note: Candidate Recommendations are expected to be acceptable as Recommendations. Announcement of a different next step should include the reasons why the change in expectations comes at so late a stage.”
The current browser landscape
Part of the CR process is to gather implementation experience. As you will know if you have enabled experimental flags in Chrome or used Firefox Developer Edition or Safari Technology Preview there is already a great deal of grid layout enabled in many browsers. Implementation is well under way. What is also great to see is how the implementation is taking shape in an interoperable manner, hopefully once we have Grid we’ll have it in great shape cross-browser. That’s the best news for us as developers and worth waiting for.
You can keep track of progress by keeping an eye on the following “meta bugs” which link to the various issues raised against the specification in browsers.
I get a lot of questions about why one feature of the spec is not enabled in one browser or another. The answer is always “because this is something that is still being worked on”. If you are playing around with grid layout and find a bug or something that simply does not appear to work, then check to see if it is already listed for that browser.
I’m keeping a roughly up to date list on Grid By Example on the browsers page.
The beginnings of Grid tooling
Something that I feel is going to be incredibly important as people start to use Grid Layout in production is the availability of browser tools, helping us to see and inspect our grids. Mozilla have already started to develop something in this direction. It’s a Work in Progress but have a look at the Grid Inspector, and raise issues if you spot a problem.
Not too late to offer feedback
As the spec approached CR status, time is running out for major changes however do take a look at the current issues, if you have a strong feeling about any of them now would be a great time to chip in! Take a look at my examples over at Grid by Example, and start to think about the possibilities once we have grid available.