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

Question

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

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

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

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

Answer 1

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

Следовательно, fr нельзя использовать в выражениях calc().

& секта; 7.2.3. Гибкие длины: fr блок

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

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

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

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

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