Czy istnieje działająca implementacja układu siatki CSS3 dla Webkita?

Question

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

jestem pośród produkcji prototypu, który zostanie pokazany na klienta na wybranych urządzeń i przeglądarek. Obecnie nie obawiam się zgodności z różnymi przeglądarkami.

IE10 Developer Preview zawiera następujące elementy:

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 wymyka się konieczności podobna do góry (nie testowałem, czy to działa, jeszcze). Jednak WebKit wydają się mieć bardzo różny realizacji:

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

Teraz jest Webkit stosując tę ​​samą specyfikację, czy jest to dla zupełnie innego modelu? Jeśli jest to przy użyciu tej samej specyfikacji, może mi pan powiedzieć, co składnia jest dla:

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

A jeśli to jest za pomocą innego modelu, to proszę dać mi znać, co składnia jest i czym różni się od MS E10. Referencje zostaną docenione.

Warto zauważyć, że mam zainstalowaną Google Chrome Canary, a także najnowszą wersję Safari do przetestowania siatki w Webkit.

Answer 1

http://caniuse.com/css-grid

W marcu 2017 roku, sporo przeglądarek obsługują układ CSS Grid:

---

stary odpowiedź:

Jest coś w pracach, tutaj jest pełnym drzewkiem emisji do jego wdrożenia:

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

Oto niektóre z CSS this file:

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

Widać intencji. Niestety, udało im się tylko przeanalizować CSS.

Wygląda na to, że w tej chwili nie ma działającej implementacji tego dla WebKit.

Podczas gdy Grid Layout ma bardzo słabe wsparcie, Flexbox ma przyzwoitą obsługę (podobno, w tym IE10). Proponuję zamiast tego używać Flexboksa.

Answer 2

Chrome Canary implementuje CSS Grid Layout TR 20130910. Znalazłem drobne różnice w niektórych nazwach właściwości. Steven Bradley summarizes the TR i zapewnia instructions and examples, jak rozpocząć korzystanie z układu siatki. Aby włączyć funkcje eksperymentalne w języku Canary, skopiuj i wklej następujące elementy w pasku adresu:

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

i kliknij "włącz".