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

Question

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

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

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。