CSS Grid Layout. Current Status and Future Plans

[Sergio Villar Senin]

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写道：

[Christian Biesinger]

Thanks, Sergio, for sending out the update!

Just as a note, I learned the hard way that handling the aspect ratio case correctly for min-height: auto is very important. Otherwise, images will get stretched incorrectly when their width gets shrunk but the min-height is not updated accordingly.

-Christian

[Sergio Villar Senin]

On 08/03/16 22:38, Christian Biesinger wrote:
> Thanks, Sergio, for sending out the update!
>
> Just as a note, I learned the hard way that handling the aspect ratio
> case correctly for min-height: auto is very important. Otherwise, images
> will get stretched incorrectly when their width gets shrunk but the
> min-height is not updated accordingly.

I'm all ears :), if you have suggestions or point me to useful parts of
the flexbox code just ping me on IRC or send me an email. Thanks.

BR

[Christian Biesinger]

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

The checkin was https://chromium.googlesource.com/chromium/src/+/eba8fa267c94a76faff64836a8c72a683c1a538e, and you may also be interested in the linked bugs for some context.

 Hope this helps!

-Christian

[L. David Baron]

On Monday 2016-03-07 13:18 +0100, Sergio Villar Senin wrote:
[ regarding subgrids ]

> 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.

Where will this work be happening? (I haven't seen anything about
it elsewhere.)

-David

--
𝄞 L. David Baron http://dbaron.org/ 𝄂
𝄢 Mozilla https://www.mozilla.org/ 𝄂
Before I built a wall I'd ask to know
What I was walling in or walling out,
And to whom I was like to give offense.
- Robert Frost, Mending Wall (1914)

[Sergio Villar Senin]

On 10/03/16 01:54, L. David Baron wrote:
> On Monday 2016-03-07 13:18 +0100, Sergio Villar Senin wrote:
> [ regarding subgrids ]
>> 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.
> Where will this work be happening? (I haven't seen anything about
> it elsewhere.)

Don't worry, it isn't something happening under the hood, as usual spec
editors will be the ones working on it. Perhaps my wording was not
totally clear. I'll try to explain what happened.

On Feb 27-28 one of the spec editors, Elika (fantasai), organized a CSS
Grid Workshop on NYC which I attended. It was a pity not having you or
Mats there because one of the hotest topics was the discussion we had
about subgrids and why nobody was implementing it. We went through the
concerns raised by François Remy
(https://lists.w3.org/Archives/Public/www-style/2016Jan/0159.html) and
by my team at Igalia
(http://blogs.igalia.com/mrego/2016/02/12/subgrids-thinking-out-loud/).

I tried to explain the parts of the spec that from our POV would be
adding a lot of complexity to the implementation without a clear benefit
(3rd dimension, subgrids in 1 axis only...). Elika and others (Jen
Simmons, Rachel Andrew...) argued that the feature is a must for web
authors. In the end, everybody agreed on having a "simplified" subgrid
is much better than having no subgrids at all (remember that the feature
is on risk for Level 1).

Note that it was not about taking decisions or having hidden
conversations at all, it was just implementors (unfortunately just me),
web authors/evangelists and editors sharing ideas about how to improve
it and make it simpler to implement while still powerful.

BR