Webkit的CSS3网格布局是否有工作实现？

Question

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

我正在制作一个原型，将在选定的设备和浏览器上显示给客户。我现在并不担心跨浏览器的兼容性。

IE10开发者预览版具有以下内容：

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躲到了与上面相似的东西（我还没有测试它是否有效）。但是，Webkit似乎有一个非常不同的实现：

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

现在，Webkit使用相同的规范，还是针对完全不同的模型？如果它使用相同的规范，你能告诉我语法是什么：

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

而且，如果它使用的是其他型号，请您告诉我它的语法是什么以及它与MS E10的区别。参考文献将不胜感激。

值得注意的是，我安装了Google Chrome Canary，以及最新版本的Safari来测试Webkit上的网格。

Answer 1

http://caniuse.com/css-grid

截至2017年3月，相当多的浏览器现在支持CSS网格布局：

---

老答案：

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

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

以下是来自this file的一些CSS：

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

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

所以，现在看来，WebKit没有这方面的实现。

虽然Grid Layout支持率很低，但Flexbox却得到了不错的支持（显然，包括IE10）。我建议你改用Flexbox。

Answer 2

Chrome Canary实现CSS Grid Layout TR 20130910。我发现一些属性名称存在细微差别。 Steven Bradley summarizes the TR并提供了instructions and examples如何开始使用网格布局。要在Canary中启用实验性功能，请将以下内容复制并粘贴到地址栏中

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

并点击“启用”。