Недопустимое значение свойства сетки CSS

Question

В Chrome и Firefox по ночам я получаю следующую ошибку при установке этого свойства:

grid-template-columns: repeat(auto-fill);
grid-template-rows: repeat(auto-fill, 1fr);

Invalid property value

При просмотре синтаксиса repeat () кажется, что я его правильно ввел? Оба браузера все еще как-то заставляют его работать, но странно, что я получаю ошибку

Answer 1

Проблема в том, что repeat() требует два аргумента (что означает repeat(auto-fill) недопустимо) вместе с auto-repeat (либо auto-fill или auto-fit), требующий определенного размера дорожки:

Вариант <auto-repeat> может повторяться автоматически, чтобы заполнить пробел, но требует определенных размеров дорожки, чтобы можно было рассчитать количество повторений. Он может появиться только один раз в списке дорожек, но тот же список дорожек может также содержать <fixed-repeat> s.

А определенное значение определяется как:

Размер, который можно определить без выполнения макета; то есть <length>, мера текста (без учета переноса строк), размер исходного содержащего блока, или <percentage> или другая формула (такая как «растягивающаяся» подстановка незамещенных блокирует [CSS2]), который разрешается исключительно для определенных размеров.

Таким образом, repeat(auto-fill, 1fr) недопустимо, но repeat(auto-fill, 100px) допустимо.