CSS Grid Layout. Current Status and Future Plans

Hi Blinkers,

it's being a while since we don't send a detailed report to the list about the status of the implementation of CSS Grid Layout in Blink (although we gave a talk in the last BlinkOn5 https://people.igalia.com/jfernandez/css-grid-blinkon-2015/#/). From time to time there is progress information in the Layout Team meetings weekly reports but it's true that a more high level overview is useful. I'll start reviewing the last year achievements to finish with the next steps.

These are the major development areas from last year:
* Auto-placement algorithm: adapting it to the latest changes (more detailed report here http://blogs.igalia.com/mrego/2015/02/25/grid-auto-placement-is-ready/)
* Implemented minimum size of grid items section. Both grid and flex show different behaviors for "min-width|height: auto" than regular blocks. It still needs some fine tuning for elements with fixed aspect ratios.
* Absolutely positioned items: fully supported now in grid, with the grid container acting both as containing block or parent (missing RTL support).
* Orthogonal flows support in the track sizing algorithm. We have a WIP patch with seems pretty good and stable so far. We will hopefully land it in the comming weeks.
* Alignment: almost finished the implementation of the Box Alignment spec in grid. Grid items can be very precisely controlled with the align-* and justify-* properties. The only missing things are baseline alignment (WIP) and the support for orthogonal flows (WIP). (See http://blogs.igalia.com/jfernandez/distributing-tracks-along-grid and http://blogs.igalia.com/jfernandez/box-alignment-and-grid-layout-ii).
* Track sizing algorithm, the core algorithm of the spec has been modified during 2015. Probably the most disruptive changes were the min-width|height:auto special behavior in grids, and the sizing of the grid container under some constrains.
* Syntax changes: although the property names were not modified we had to implement the changes in the shorthands that happened during last year. Also there were some nice additions like the long awaited possibility of defining gutters between tracks with grid-row|column-gap.
* Performance: still a lot of room for improvement (we first need actual use cases in order to avoid synthetic micro-optimizations), but some measurements were made to help web authors when designing their grids (http://blogs.igalia.com/jfernandez/2015/06/24/performance-on-grid-layout/).
* Placement: Refactoring of grid items placement code in order to add support for implicit grid before explicit and fix unknown named lines resolution (see http://blogs.igalia.com/mrego/2016/02/01/deep-dive-into-grid-layout-placement/).
* W3C Test Suite: Created more tests on the Grid Layout suite (WIP). (https://github.com/w3c/csswg-test/tree/master/css-grid-1)

Regarding our plans for the future, we know that people have been waiting for some time for the intent to ship. All I can say is that we're quite close now. Said that, there is basically one blocker preventing us from sending it, and that's subgrids. That's a feature that we haven't implemented yet because it was at risk for level 1 for some time now. After talking to web authors and spec editors it seems that shipping without it will be a big mistake. That's why we have agreed to work together on a simplified version of the feature that would be "easy" to implement but still powerful.

Spec editors are planing to move the specification to CR soon. Our plan is to start implementing subgrids as soon as possible and to make the required fine tunning once the spec is finally stabilized. Apart from that, we're currently working on some other recently added nice features like the auto repeat syntax while improving the code by refactoring and cleaning up the implementation.

Should you have any question do not hesitate to ask.

BR

auto-repeat() +1

在 2016年3月7日星期一 UTC+8下午8:18:49，Sergio Villar Senin写道：

Thanks, Sergio, for sending out the update!

Sure, it's LayoutFlexibleBox::computeMainSizeFromAspectRatioUsing -- https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/core/layout/LayoutFlexibleBox.cpp&q=layoutflexiblebox&sq=package:chromium&l=654