是否有适用于 Webkit 的 CSS3 网格布局的有效实现?

<小时>

旧答案:

有一些工作正在进行中，这是其实现的完整问题树:

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

这里有一些来自 这个文件:

.gridWithFixed {显示:-webkit-grid；-webkit-grid-columns:7px 11px；-webkit-grid-rows:17px 2px；}

您可以看到意图.不幸的是，他们只能解析 CSS.

所以，现在似乎没有针对 WebKit 的有效实现.

虽然 网格布局 的支持很差，但 Flexbox 有不错的支持(显然，包括 IE10).我建议你改用 Flexbox.

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.

解决方案

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.