CSS WG Blog CSS Grid Layout Level 1 Updated

CSS Grid Layout Level 1 Updated

The CSS Working Group has published an updated Working Draft of CSS Grid Layout Level 1. This module defines a new type of layout manager, the grid, which makes it extremely easy to specify complex, responsive 2-dimensional layouts for a page or components.

The editors consider this draft to be the final design draft. There are a few open issues left, but these are mostly fixes and clarifications to the algorithms–the main one of which is ensuring the flexbox and grid flexing and fragmentation algorithms are in sync. There’s also one on visibility: collapse, which might be nice to solve, but might get pushed to Level 2. We will be updating the spec as we work through these, but don’t expect to make any significant changes to any existing features–unless someone sends a comment that requires such a change.

Your feedback is still welcome on the featureset and syntax. However because we’re hoping to prepare the final draft the week after TPAC, we would greatly prefer to receive said comments in time for discussion at the the CSSWG F2F–which begins on the 25th of October 2015.

We are looking especially for

• Feedback on anything you think is badly designed.
• Suggestions of use cases that are important to consider.
• Help with examples, figures, and making the spec generally more readable and understandable.

Changes since the last Working Draft are listed in the Changes section.

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([css-grid-layout]) and your comment topic in the subject line. Alternatively, you can email one of the editors and ask them to forward your comment, post something on your own blog and send us a link, or leave a comment here.

« Previous article Next article »

Comments

• Nigel Clutterbuck 2015-09-18 12:18:09 I would love the ability to have sub grids available in this version of the specification, I am about to embark on the redesign of a multinational site and not have sub grids available at this time may have a detrimental effect on my ability to use grids for this project. As it stands no vendor has included this in their browser currently so I am unable to confirm the effect this will have either way.
• Toby Mackenzie 2015-09-30 03:54:21 In the placement algorithm section of the spec, step 4, “dense” packing, item has a definite column position, it says to place the item at the first row position \"where the grid item does not overlap any occupied grid cells\". I\'m not sure how close to spec Google Chrome\'s implementation is, but it seems to more of pay attention to a full width row level track instead of just grid items within the specified column(s) that the item may overlap. Is the \"grid cell\" in the algorithm supposed to be the height of the tallest item in the full-width track that the item would overlap or just the height of the item itself? I only ask because the latter would make some useful things possible that would not otherwise be. I can provide an example if you are interested.