*Contact emails*
jfern...@igalia.com,
re...@igalia.com,
svi...@igalia.com
*Spec*
https://drafts.csswg.org/css-grid/
The spec has recently transitioned to a Candidate Recommendation (CR):
https://lists.w3.org/Archives/Public/www-style/2016Oct/0121.html
*Summary*
CSS Grid Layout is a new layout model for the web that allows
page authors to create customizable two-dimensional designs.
Grid allows flexibily dividing the page into rows and columns
called "tracks" and placing elements within the areas defined
by these containers.
While the spec has progressed to a Candidate Recommendation,
the feature has been under development in all the major browsers.
Thanks to support from Bloomberg, Igalia has been implementing
Grid Layout in both Blink and WebKit. Web authors are really excited
about this feature and ready to use it for real. Grid Layout
has continued to be a popular topic in many frontend conferences
all around the globe during recent years.
*Link to “Intent to Implement” blink-dev discussion*
Grid Layout work started back in 2011, before the WebKit fork:
https://lists.webkit.org/pipermail/webkit-dev/2011-November/018570.html
*Is this feature supported on all six Blink platforms
(Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?*
Yes
*Demo link*
There are some good resources with lots of examples available:
* Rachel Andrew's page:
http://gridbyexample.com/
* Jen Simmons's page:
http://labs.jensimmons.com/
*Debuggability*
It is possible to debug grid layout like any other CSS feature
(e.g. Flexbox) through DevTools.
It would be really nice to add some specific Grid Layout features
into DevTools (like Firefox is already doing [1]). For example:
grid lines, areas, etc. could be properly highlighted
to facilitate the development of webpages using grid.
*Interoperability and Compatibility Risk*
First let's summarize the status in other browsers:
* Firefox: They have a good implementation and it has been enabled
by default in developer builds for a few months. [2]
* Safari: Apple doesn't talk about their plans, but
the implementation is progressing in WebKit as well and is almost
equivalent to the one in Blink. [3]
They have also showed interest in the patch reviews and
conversations during the WebKit Contributors Meeting.
* Edge: An old, prefixed version of the spec has been shipping
since IE10. [4]
Microsoft has plans to update their implementation now that
the spec has become a CR. [5]
We've been checking the interoperability between the Blink and
Firefox implementations using the different tests from each project
and reporting bugs here and there. We believe that currently
both implementations behave similarly in most of situations.
Of course we also expect some corner cases to appear as more people
start to use Grid Layout.
In addition, we have created some initial tests for the
W3C Test Suite [6]. We paused work on this because the spec
was changing rapidly at that time. Now that it has become a CR
we have plans to continue adding and updating tests there.
Regarding the implementation, most of the features from the spec
are ready. The idea would be to switch the flag after M56
is branched. However there are still two features missing:
* Fragmentation: It's a common issue for the entire platform
(one of the goals of the LayoutNG effort), and other features
like Flexbox lack proper support as well.
* Subgrids: These represent a very complex feature and one currently
marked as "at-risk" on the spec. None of the vendors are planning
to implement it for the moment.
A few features are currently under development:
* Baseline alignment support.
* Alignment and orthogonal flows support for positioned grid items.
Last, but not least, the CSS Grid Layout spec depends on
the new CSS Box Alignment spec. Grid Layout is the first feature
implementing all the new values and properties defined in that spec.
Some of them are shared by Flexbox. Our plan is to ship all
these features as they're very useful when combined with Grid Layout,
but another option might be to keep them behind a runtime flag.
The CSS WG encourages the use of the CSS Alignment spec once
more than one layout model uses the alignment properties.
*OWP launch tracking bug*
http://crbug.com/79180
*Entry on the feature dashboard*
https://www.chromestatus.com/feature/4589636412243968
[1]
http://bugzil.la/1181227
[2]
http://bugzil.la/616605
[3]
http://webkit.org/b/60731
[4]
https://msdn.microsoft.com/library/hh673533
[5]
https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid
[6]
https://github.com/w3c/csswg-test/tree/master/css-grid-1