Webkit的CSS3网格布局有工作实现吗？ [英] Is there a working implementation of CSS3 Grid Layout for Webkit?

问题描述

CSS网格布局，编辑草稿，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上的网格。
解决方案
在工作中有一些东西，这里是它的实现的完整的问题树：
 
 
 
  https://bugs.webkit.org/showdependencytree.cgi？ id = 60731& hide_resolved = 0  
 
 
 
这里有一些来自此文件：
  .gridWithFixed {
 display：-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.
解决方案
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.

                        
这篇关于Webkit的CSS3网格布局有工作实现吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！