CSS WG Blog CSS Grid Layout Update, Request for Commen…

CSS Grid Layout Update, Request for Comments

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.

We hope to close the remaining issues over the next month and prepare to issue a Candidate Recommendation this fall, so please review the draft and the issues and send feedback! We want to make everyone happy, but that won’t happen if you complain after we’re done and everyone’s already shipped their implementations and you only bother to tell us you don’t like something two years later, yeah? So review now, and complain sooner rather than later. 🙂

Changes since the last Working Draft are listed in the Changes section, and since we forgot to announce the previous few publications on this blog, you might also want to check March 2015 and May 2014 if you’re interested specifically in changes. The most significant changes over the last year include

• Adding row-gap/column-gap properties. Please tell us if the extra space should be included in the stated row/column widths!
• Improving error handling and absolute-positioning rules.
• Changing the definition of auto track-sizing to check the min-width/min-height properties instead of always using the min-content width, and using min-width/height: auto to implement the previously implied min-content minimum.
• Applying the <content-distribution> values of align-content and justify-content to grid tracks, allowing them to be spaced out and justified just like flex items.
• Experimenting with a repeat-to-fill feature, which is unfortunately a bit shaky because we have to determine the number of columns before auto-sizing can happen.
• Lots of fixes and clarifications everywhere.

We welcome all feedback, particularly from Web authors. If you need a layout to align in two dimensions, this is the module for it, so make sure it handles the things you need! Please help us make this module more correct, more useful, more usable, and more readable!

As always, please send feedback to the (archived) public mailing list www-style@w3.org with the spec code ([css-grid]) and your comment topic in the subject line. (Alternatively, you can email one of the editors and ask them to forward your comment.) Known issues are listed in in this issue-tracking list.

« Previous article Next article »

Comments

• Goetz Heller 2016-07-09 18:30:52 The fact that Grid Layout restrict positioning to immediate child nodes of the container appears to me as overly restrictive. Here is a use case of indirect child nodes participating in grid positioning (similar to outlook 2015): Consider a layout where the navigation area (\"NAV\") sits to the left of the content area (\"CONTENT\"). The application presents a system of say four subsystems. Each subsystem has one or more forms which should fill the whole content area while being activated. The Navigation bar has a noop button each on the top (\"TOP\") and the bottom (\"BOT\"), each outside of the \"NAV\" grid area. Beetween them, there is a button for each of the subsystem (inside the \"NAV\" grid area). When clicked, the subsystem buttons below slide towards the bottom, and for each form of the subsystem, a individual button is displayed inside the free area. If one of the forms for the subsystem had been displayed before, it will show up in the content area, otherwise, a default frontmatter is displaed. Clicking one of the subsystem buttons whill result in the correponding subform being displayed in the content area. Clicking on a different subsystem button results in an analoguous behavior, making the other subsystem\'s form buttons and forms disappear. Structurally, the data would by organized by subsystem such that each subsystem contains one or more groupings each associated with a form for that subsystem. Each grouping goes into the content area but also provides for a clue for a form button below the subsystem button. It would by rather straight forward to build this application with a framework like AnularJS. System -subsystem 1 common data 1 group 1_1 group-specific data 1_1 group 1_2 group-specific data 1_2 group 1_3 group-specific data 1_3 -subsystem 2 common data 2 group 2_1 group-specific data 2_1 -subsystem 3 common data 3 group 3_1 group-specific data 3_1 group 3_2 group-specific data 3_2 group 3_3 group-specific data 3_3 -subsystem 4 common data 4 group 4_1 group 4_1 group-specific data 4_1 group 4_2 +----------------+---------------------------------------------+ | \"TOP\" bnNOOP | \"CONTENT\" Currently Form 3_2 with data | +----------------+ from common data 3 and group 3_2 | | \"NAV\" | | | (System as | | | flexbox | | | containg the | | | buttons below | | | without bnNOOP)| | +----------------+ | | bnSubsystem 1 | | +----------------+ | | bnSubsystem 2 | | +----------------+ | | bnSubsystem 3 | | +----------------+ | | +----------+ | | | | Form 3_1 | | | | +----------+ | | | +----------+ | | | | Form 3_2*| | | | +----------+ | | | +----------+ | | | | Form 3_3 | | | | +----------+ | | | | | | | | +----------------+ | | bnSubsystem 4 | | +----------------+ | | \"BOT\" bnNOOP | | +----------------+---------------------------------------------+ The sequence of subsystems and its immediate children does not reveal enough of the data structure to fill the grid as desired. Please consider to allow for placement of indirect children of grid containers. Of course, if there is a descendent grid container, then all of its descendents with a declared grid-area should go either into the outer grid or the inner grid whichever contains the closest matching grid-area name declaration. Kind regards, Goetz Heller
• fantasai 2016-07-11 21:29:21 Hi Dr. Heller! Thank you very much for your feedback. I have copied it into a GitHub issue here. Descendant positioning of grid items was part of some of the earliest drafts of this module, but was among the features that were dropped along the way. Hopefully we\'ll look into for Level 2; and your detailed description here I am sure will be helpful to us in that effort. Please feel free to add any additional comments to the GitHub issue.