Есть ли рабочая реализация CSS3 Grid Layout для Webkit?

Question

CSS Grid Layout, черновик редактора, 21 ноября 2011 г.

Я нахожусь в процессе создания прототипа, который будет показан клиенту на выбранных устройствах ибраузеры.В настоящее время я не беспокоюсь о кросс-браузерной совместимости.

IE10 Developer Preview имеет следующее:

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 года довольно много браузеров теперь поддерживают CSS Grid Layout:

---

старый ответ:

Что-то в работе, вот полное дерево вопросов для его реализации:

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.

Answer 2

Chrome Canary реализует CSS Grid Layout TR 20130910 .Я нашел незначительные различия в некоторых именах собственности.Стивен Брэдли обобщает TR и предоставляет инструкции и примеры о том, как начать использовать макет сетки.Чтобы включить экспериментальные функции в Canary, скопируйте и вставьте следующую строку в адресную строку

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

и нажмите «включить».