Intent to Ship: CSS Grid Layout

1,087 views
Skip to first unread message

Manuel Rego Casasnovas

unread,
Nov 14, 2016, 6:50:33 AM11/14/16
to blin...@chromium.org

*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

Christian Biesinger

unread,
Nov 15, 2016, 2:43:18 PM11/15/16
to Manuel Rego Casasnovas, blink-dev
Really looking forward to shipping this.

One note re css-align: fantasai has suggested "I would implement and
ship the subset of Align syntax that's been shipped as part of
Flexbox, plus the start/end/space-evenly values."
https://lists.w3.org/Archives/Public/www-style/2016Nov/0014.html

Christian

TAMURA, Kent

unread,
Nov 15, 2016, 6:00:37 PM11/15/16
to Christian Biesinger, Manuel Rego Casasnovas, blink-dev
LGTM1 to ship.

--
TAMURA Kent
Software Engineer, Google


Manuel Rego Casasnovas

unread,
Nov 16, 2016, 4:32:00 AM11/16/16
to blin...@chromium.org

On 14/11/16 12:50, Manuel Rego Casasnovas wrote:
> * Firefox: They have a good implementation and it has been enabled
> by default in developer builds for a few months. [2]

And they've just sent the "Intent to Ship" mail too:
https://groups.google.com/d/msg/mozilla.dev.platform/6shk3TZX5vo/avSCrtLCBgAJ

Bye,
Rego

Philip Jägenstedt

unread,
Nov 16, 2016, 5:08:08 AM11/16/16
to Manuel Rego Casasnovas, blin...@chromium.org
Sounds like interop testing has been happening and will continue to happen, that's very encouraging. For all the facets that you intend to ship, it'd be great to share as many LayoutTests as possible with csswg-test.

Rego, given the feedback that Christian forwarded, can you spell out in more detail what parts of https://drafts.csswg.org/css-align/ this covers? Of the things being the CSSGridLayout flag, only justify-items and justify-self doesn't start with grid-*, so I guess that's it? Would it make sense to have a separate chromestatus.com entry for CSS Box Alignment?

Manuel Rego Casasnovas

unread,
Nov 16, 2016, 6:02:07 AM11/16/16
to blin...@chromium.org

On 16/11/16 11:07, Philip Jägenstedt wrote:
> Sounds like interop testing has been happening and will continue to
> happen, that's very encouraging. For all the facets that you intend to
> ship, it'd be great to share as many LayoutTests as possible with
> csswg-test.

Yeah that's the plan, try to upstream some of the tests from both
projects would be really nice.

> Rego, given the feedback that Christian forwarded, can you spell out in
> more detail what parts of https://drafts.csswg.org/css-align/ this
> covers? Of the things being the CSSGridLayout flag, only justify-items
> and justify-self doesn't start with grid-*, so I guess that's it? Would
> it make sense to have a separate chromestatus.com
> <http://chromestatus.com> entry for CSS Box Alignment?

Grid Layout covers the whole Box Alignment spec. Currently everything is
implemented but baseline alignment that is WIP.

The question now is what to do with this, if we should ship the whole
thing together with Grid Layout; which makes Grid Layout much more
powerful. Or if we should just stick to the things that have been
already shipped in Flexbox for a while, and keep the rest behind a
experimental flag.
We've just asked Firefox developers about their plans on this particular
topic too.
And we've asked CSS WG to clarify their mail, as shipping Grid Layout
with align-items|self but not justify-items|self (which are not part of
Flexbox) doesn't seem to have a lot of sense either.

Regarding the feature it has its own entry on the dashboard:
https://www.chromestatus.com/feature/6173208034148352

Bye,
Rego

Philip Jägenstedt

unread,
Nov 16, 2016, 6:06:41 AM11/16/16
to Manuel Rego Casasnovas, blin...@chromium.org
I'll take your judgement on what makes sense to ship together, and I take it it's exactly the set of things behind the CSSGridLayout flag?

When you're satisfied you have a shared understanding with the Firefox developers and fantasi, or if there's no response in a few days, please circle back to this thread and we can try to move it along.

Geoffrey Sneddon

unread,
Nov 16, 2016, 11:29:11 AM11/16/16
to Manuel Rego Casasnovas, blink-dev
On Wed, Nov 16, 2016 at 11:02 AM, Manuel Rego Casasnovas
<re...@igalia.com> wrote:
>
> On 16/11/16 11:07, Philip Jägenstedt wrote:
>> Sounds like interop testing has been happening and will continue to
>> happen, that's very encouraging. For all the facets that you intend to
>> ship, it'd be great to share as many LayoutTests as possible with
>> csswg-test.
>
> Yeah that's the plan, try to upstream some of the tests from both
> projects would be really nice.

If you hit anything that stops that from being trivial, feel free to
ping me; I really want to get more grid tests landed in csswg-test.
(The answer may well be there's some infrastructure work to make as
little metadata as needed required per the previous CSS WG
resolutions, if that's the case, let me know.)

/gsnedders

Geoffrey Sneddon

unread,
Nov 16, 2016, 11:34:03 AM11/16/16
to Manuel Rego Casasnovas, blink-dev
(Bah, saw this just after my prior email…)

On Mon, Nov 14, 2016 at 11:50 AM, Manuel Rego Casasnovas
<re...@igalia.com> wrote:
> * Firefox: They have a good implementation and it has been enabled
> by default in developer builds for a few months. [2]

They now have an intent to ship in Firefox 52, including "all parts of
the CSS Box Alignment spec that are relevant to Grid layout".[0]

Also, given I didn't say this in my last email: YAY! I am *so* happy
to see Grid shipping.

[0]: https://groups.google.com/d/msg/mozilla.dev.platform/6shk3TZX5vo/avSCrtLCBgAJ

/gsnedders

Rick Byers

unread,
Nov 17, 2016, 10:51:20 AM11/17/16
to Geoffrey Sneddon, Manuel Rego Casasnovas, blink-dev
LGTM2 to ship Grid

If there's a general agreement between CSSWG and Firefox that we should hold off on shipping some parts of the alignment spec because they're likely to change then we should probably do that.  If there's ongoing debate here you could always split that into a separate feature / intent.

Chris Harrelson

unread,
Nov 17, 2016, 12:25:31 PM11/17/16
to Rick Byers, Geoffrey Sneddon, Manuel Rego Casasnovas, blink-dev
LGTM3

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.

Reply all
Reply to author
Forward
0 new messages