GridBugs

Вдохновленный Flexbugs этот список предназначен для того, чтобы быть курируемым списком ошибок, багов, неполных реализаций и особенностей работы CSS Grid Layout в разных браузерах. Grid реализован в браузерах в работоспособном состоянии, однако есть некоторые проблемы - давайте документировать их все здесь.

Здесь мне хотелось бы сосредоточиться на вопросах, связанных со спецификацией Grid, но вполне вероятно, что придется отдельно ссылаться на некоторые другие спецификации, такие как Box Alignment. Если вы считаете, что заметили проблему, и, похоже, она относится к Гридам, опубликуйте её. Мы сможем подробно разобраться в деталях и убедиться, что проблемы с реализацией в браузере или ошибки спецификации попали в нужное место.

Также, пожалуйста, поднимите вопрос, если я ошибаюсь в отношении любого из описаных багов или у вас есть дополнительная информация или примеры для добавления. Вероятно, я мог сослаться на неправильный UA или пропустил изменение в спецификации. Помогите сделать список более точным и актуальным!

Это не техническая поддержка CSS Grid

Присылая вопрос, пожалуйста, подробно опишите путь воспроизведения проблемы и создайте Сокращенный Тестовый Пример, чтобы проверить, что проблема не является следствием вашего кода. Если вы хотите больше узнать о CSS Grid Layout, посмотрите на Гриды в Примерах где вы найдете видеоуроки, примеры и ссылки на другие полезные ресурсы. На больше вопросов о CSS Гридах я отвечу в своем AMA когда будет время. Также я собрал нужную информацию о фоллбеках для старых браузеров.

Баги

1. grid-auto-rows и grid-auto-columns должен принимать список направляющих.
2. Повторная нотация должна заново принимать список направляющих.
3. Поддержка фрагментации.
4. Выравнивание элементов с собственными размерами в сетках с фиксированными направляющими.
5. Элементы с внутренним соотношением сторон должны выравниваться в начале.
6. grid-gap параметры должны принимать значение в процентах.
7. Grid отступы должны вести себя как направляющие с авто-размерами?
8. Установка максимальной высоты в процентах должна уменьшать изображение большего размера внутри направляющих сетки.
9. min-content и max-content в направляющих.
10. Некоторые HTML элементы не могут быть грид-контейнерами.
11. Текстовое поле, которое является элементом сетки, сворачивается до нулевой ширины.
12. Пространство, распространяемое на пустые направляющие, растягивается элементами с контентом.
13. Несостыковки с процентными паддингами и марджинами.
14. fit-content растягивается.

1. grid-auto-rows и grid-auto-columns должен принимать список направляющих.

Параметрыgrid-auto-rows и grid-auto-columns дают возможность задавать размеры направляющих в неявных сетках. Спецификация говорит:

"Если заданы несколько размеров направляющих, шаблон повторяется по мере необходимости, чтобы найти размеры неявных направляющих. Первая неявная направляющая сетки перед явной сеткой принимает первый указанный размер и так далее вперед.; И последняя неявная направляющая сетки до того, как явная сетка получит последний указанный размер и так далее в обратном порядке." - 7.6 Implicit Track Sizing (Размеры Неявных Направляющих)

2. Повторная нотация должна заново принимать список направляющих.

Повторная нотация может принимать однотипное значение направляющей для повторения, например:

repeat(3,200px);

Или для списка направляющих:

repeat(3, 200px 100px);

Это возможно когда числа повторяются как auto-fill или auto-fit для объявления как можно большего количества направляющих.

"Первый аргумент указывает количество повторений. Второй аргумент - это список направляющих, которые повторяются определенное количество раз." - Синтакс repeat()

3. Поддержка фрагментации

В настоящее время существует ограниченная поддержка фрагментации в браузерах, поэтому такие функции, как свойства break-* вряд ли будут адекватно работать. Подробнее о том, как должна работать фрагментация в CSS Grid Layout: 12. Fragmenting Grid Layout.

4. Выравнивание элементов с собственными размерами в сетках с фиксированными направляющими

В Firefox элементы с внутренним размером масштабируются, чтобы вписаться в сетку с фиксированным размером, а не вылезать за неё.

Я считаю, что правильное поведение в данном кейсе состоит в переполнении элементов с фиксированным размером, в соответствии с резолюцией WG Issue 523.

5. Элементы с внутренним соотношением сторон должны выравниваться в начале

В Safari 10 элемент сетки поумолчанию выравнивался как stretch, а не start.

Временное решение

Временным решением проблемы является декларирование align-self: start и justify-self: start для элемента.

6. The grid-gap параметры должны принимать значение в процентах

В настоящее время процентные значения grid-gap помечаются как рискованные в Уровне 1 спецификации. Сильным вариантом использования для процентного значения является добавление некоторых функций грид-лейаута к макету, который уже использует разметку на флоатах или флексбоксах: посмотрите твит от @minamarkham. Эти системы должны использовать проценты для интервалов, чтобы создать «сетку».

7. Grid отступы должны вести себя как направляющие с авто-размерами?

Существует также несоответствие касательно процентного значения grid-row-gap, если высота сетки не является фиксированной. Chrome, Safari TP, и Edge Preview сжимают разрыв между рядами до 0. Firefox вероятно использует проценты от общей высоты сетки.

• Пример 7.1
• CSS WG дискуссия

8. Установка максимальной высоты в процентах должна уменьшать изображение большего размера внутри направляющих сетки

С помощью max-height изображение внутри направляющих фиксированного размера должно быть распределено так, чтобы изображение масштабировалось и помещалось внутри сетки.На данный момент в Chrome это не работает и изображение вылезает за направляющие сетки. Использование max-width работает, когда изображение ограничено размером направляющих столбца, установка фиксированной высоты работает так, как ожидалось, как и установка максимальной высоты с использованием px (пикселей) в качестве единицы измерения.

9. min-content и max-content в направляющих

В Safari 10, значения min-content, max-content и fit-content были под префиксами. В Safari Technology Preview они уже работают без префиксов.

Временное решение

Как временное решение используйте префиксы -webkit-min-content, -webkit-max-content и -webkit-fit-content.

10. Некоторые HTML элементы не могут быть грид-контейнерами

В Chrome (и Safari 10) некоторые строчные элементы с display: grid не работают как грид-контейнер. Элемент button функционирует только как контейнер сетки в Firefox. Эта же проблема есть и в Flexbox: подробней на странице Flexbugs.

11. Текстовое поле, которое является элементом сетки, сворачивается до нулевой ширины

В OS X Chrome, если текстовая область является элементом сетки, её ширина сворачивается до 0, когда в неё начинают вводить текст. Ссылка на пример ведет на Chromium, поскольку из-за того, как CodePen загружается в iframe, баг, похоже, не воспроизводится.

12. Пространство, распространяемое на пустые направляющие, растягивается элементы с контентом

Если у вас есть сетка с пустыми дорожками, которые связаны с элементами в сетке, этим дорожкам не следует назначать дополнительное пространство из-за перекрывания элемента. Firefox назначает дополнительное пространство (bug#1), связанный с тем, что Firefox делает разные вещи в зависимости от исходного порядка (bug#2).

Спасибо всем, кто помог изолировать эти баги здесь. Дискуссия будет вам очень полезна, если вы действительно хотите разобраться в причинах багов.

13. Несостыковки с процентными паддингами и марджинами

Как указывает @mrego, существует многолетняя проблема совместимости с процентным заполнением и полями как в Grid, так и в Flexbox.

Firefox и Edge (Preview) разрешают процентные margin/padding для элементов в соответствии с их размером (шириной или высотой), Chrome всегда использует ширину, точно так же, как проценты разрешены в блочном лейауте. Спецификация допускает обе возможности и предполагает, что авторы не используют процентные паддинги и марджины.

14. fit-content растягивается

@simevidas заявляет, что Chrome растягивает направляющии по размеру fit-content, а Firefox нет. Я считаю, что Firefox ведет себя в этом случае корректно, и направляющие должны быть привязаны к значению длины, если контент превышает значение. Edge (Preview) ведет себя в этом случае так же как и Firefox.

Временное решение

Обходным путем для этого является использование justify-content: start или justify-content: end для направляющих.

Примечание

Gridbugs курируется и создан @rachelandrew под вдохновлением от замечательного Flexbugs.

Автор данного перевода - Владимир Гуменюк (Vladimir Humeniuk).

Другие языки

Английский

Содействие

Прежде всего создавая новую ошибку, прикрепляйте сокращенный пример кода и пути воспроизведения ошибки. Если вам известны обходные пути также опишите их.