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

CSS Grid Layout, Editors Draft, 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.

Ответ 1

http://caniuse.com/css-grid

По состоянию на март 2017 года довольно много браузеров теперь поддерживают компоновку сетки 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.

Ответ 2

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

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

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