Is there a working implementation of CSS3 Grid Layout for Webkit?

Question

CSS Grid Layout, Editor’s Draft, 21 November 2011

I am in the midst of producing a prototype that will be shown to client on selected devices and browsers. I am not worried about cross-browser compatibility at this time.

IE10 Developer Preview has the following:

display: -ms-grid;
-ms-grid-columns: ;
-ms-grid-rows: ;
-ms-grid-column: ;
-ms-grid-row: ;
-ms-grid-row-align: stretch;
columns: ;
column-fill: auto;
column-gap: ;

Mozilla eludes to having similar to above (I haven’t tested whether it works, yet). However, Webkit appear to have a very different implementation:

display: -webkit-box;
-webkit-columns: ;
-webkit-column-gap: ;

Now, is Webkit using the same specification, or is this for an entirely different model? If it is using the same specification, could you tell me what the syntax is for:

grid-columns: ;
grid-rows: ;
grid-column: ;
grid-row: ;

And, if it is using a different model, could you please let me know what the syntax is and how it differs from MS E10. References will be appreciated.

It is worth noting that I have Google Chrome Canary installed, as well as the latest version of Safari to test the grid on Webkit.

Answer 1

http://caniuse.com/css-grid

As of March 2017, quite a few browsers now support CSS Grid Layout:

---

old answer:

There's something in the works, here is the full issue tree for it's implementation:

https://bugs.webkit.org/showdependencytree.cgi?id=60731&hide_resolved=0

Here's some CSS from this file:

.gridWithFixed {
    display: -webkit-grid;
    -webkit-grid-columns: 7px 11px;
    -webkit-grid-rows: 17px 2px;
}

You can see the intent. Unfortunately, they've only got as far as parsing the CSS.

So, it looks like right now there's no working implementation of this for WebKit.

While Grid Layout has very poor support, Flexbox has decent support (apparently, including IE10). I suggest you use Flexbox instead.

Answer 2

Chrome Canary implements the CSS Grid Layout TR 20130910. I have found minor differences in some of the property names. Steven Bradley summarizes the TR and provides instructions and examples for how to get started using the grid layout. To enable experimental features in Canary, copy and paste the following into the address bar

chrome://flags/#enable-experimental-web-platform-features

and click ‘enable’.