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

Question

CSS Grid Layout,编辑草案,2011年11月21日

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

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

这是来自这个文件的一些CSS :

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

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

所以,现在看来,WebKit没有这方面的工作实现.

虽然Grid Layout的支持很差,但Flexbox有很好的支持(显然,包括IE10).我建议你改用Flexbox.