CSS Grid Layout Status Review (Jan 2015)

[Manuel Rego Casasnovas]

Hi,

this is a new status review (last one was in August 2014 [1]) of the CSS
Grid Layout [2] implementation done by Igalia. We'll summarize the work
done during the past months and the plans for the future.
Of course, we'll be really happy to get any kind of feedback from the
community.

The meta-bug to follow the evolution of this feature is:
http://crbug.com/79180


Main tasks done since August:

* Track Sizing Algorithm (http://crbug.com/392200):
* Fixed initialization of track sizes from non spanning items.
* Added and enforced the growth limit >= base size constraint.
* Tracks no longer shrink with undefined remaining space.
* Fixed the grow beyond growth limits use case.
* Do not use items spanning through flex tracks when sizing content
sized tracks.
* Sizing content sized tracks is no longer order-dependent.
* Support of percentages of indefinite sizes in minmax().

* Auto-placement (http://crbug.com/384099):
* Support sparse & dense packing modes.
* Stack mode was finally dropped from the spec.

* Alignment & justification (http://crbug.com/234199):
* Support alignment properties (justify-self, align-self,
justify-items, align-items, justify-content & align-content).
* Handling overflow with self alignment.

* Absolutely positioned grid children (http://crbug.com/273898):
* Initial support.
* Some things pending to define by the CSS WG.

* Writing modes (http://crbug.com/437354):
* Fixed some bugs (sizing, alignment) related to writing modes.
* Tracks sizing and positioning support for "direction" property.
* Margin, border and padding working as expected in any writing mode
and direction.

* Testing:
* Improve test coverage (http://crbug.com/395788), which lead to some
bug reports and fixes.
* Outside Blink: Started to create the W3C test suite for grid [3].
Still on early stages, check the test plan [4] for more information.

* Bugfixing:
* Fixed different bugs reported by clusterfuzz and fuzzinator.
* Generic bugfixing.


Ongoing tasks:

* Track Sizing Algorithm (http://crbug.com/392200):
* Improving sizing computations of tracks growing above limits.
* Fix behavior under min/max-width and min/max-content.
* Add support for mark as infinitely growable and unmark.
* Rewrite some of the loops that are incorrectly nested.

* Alignment & justification (http://crbug.com/234199):
* Handling overflow with content alignment.
* Baseline alignment.
* Dealing with orthogonal flows.
* Content distribution (still under discussion in the CSS WG).

* Absolutely positioned grid children (http://crbug.com/273898):
* Finish last details once spec has a definitive wording on this topic.

* Writing modes (http://crbug.com/437354):
* Adapting the track sizing and item positioning in orthogonal flows.

* Testing:
* Outside Blink: Continue working on the W3C test suite in order to
cover the whole spec. Then, import the test suite into Blink.


Plans for the future:

* Support "auto" keyword for repeat() function.

* Allow to grow the implicit grid before the explicit grid (supporting
properly negative indexes for grid line numbers).

* Implement fragmentation support once the spec is definitive regarding
this topic.

* Performance analysis and optimizations.

* Grid support on Chrome DevTools.


Talking about the short-term, we're willing to send the "Intent to ship"
once we solve some pending issues in the track sizing algorithm (in
order to adapt it to the last modifications in the spec).

This is a high level summary, you can check the different bugs for more
details. Please don't hesitate to ask any question. We hope you find
this information useful.

BTW, you can already test CSS Grid Layout enabling experimental Web
Platform features flag.

Best regards,
Rego

[1]
https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/sckMiEWQqA0/V6FwsEEHzskJ
[2] http://dev.w3.org/csswg/css-grid/
[3] http://test.csswg.org/shepherd/search/spec/css-grid-1/
[4] http://rawgit.com/w3c/csswg-test/master/css-grid-1/test-plan/index.html