Использование дроби (fr) в calc () дает " недопустимое значение свойства"

Я пытаюсь использовать calc() на некоторых ширинах при использовании CSS-сетки. Поэтому я пытаюсь сделать вот что: 

grid-template-columns: calc(1fr - 50px) calc(1fr - 50px);

Так как я хочу, чтобы это были две фракции, но удалите 50px, так как это используется для заполнения и так далее. Однако при этом Chrome говорит:"недопустимое значение свойства".

Нельзя ли calc() использовать на дробях, или я делаю что-то не так?

1 3
css css3 css-calc

1 ответ:

Единица измерения fr не является стандартной длиной, как проценты или пиксели. Он представляет собой только оставшееся пространство.

Поэтому fr нельзя использовать в выражениях calc().

§ 7.2.3. Гибкие длины: fr агрегат

Гибкая длина-это размерность с единицей fr, которая представляет часть оставшегося пространства в сеточном контейнере.

fr единицы измерения не являются длинами, поэтому они не могут быть представлены в calc() выражения.

Но действительно ли вам нужен calc() в первую очередь?

fr применяется только к оставшемуся пространству, которое остается после того, как были учтены истинные длины, такие как ширина, границы, поля и отступы.

Рассмотрите возможность использования fr самостоятельно. В противном случае опубликуйте полный пример с этой проблемой.

5