User Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0 Build ID: 20170317213149 Steps to reproduce: It's not possible to use dynamic values in CSS Grids repeat() function through calc() function. You can't use calculations inside or outside it. Like this: grid-template-columns: repeat(calc(2 * 2), 1fr); Or like this: --value: calc(2 * 2); grid-template-columns: repeat(var(--value), 1fr); It's very sad because you can't do more with CSS Grids, e.g. subgrids polyfilling (http://codepen.io/lautsevich/pen/NpYobE). Actual results: Grids don't works at all. Expected results: You should see a four columns grid.
Right, the spec is very clear that calc() "can be used wherever <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values are allowed." https://drafts.csswg.org/css-values/#calc-notation Chrome supports it for repeat() and grid line and span <integer>s, so we should try to fix this soon-ish. I'll take a stab at it...
I've added a note about this to https://developer.mozilla.org/en-US/docs/Web/CSS/repeat#Browser_compatibility. Once this bug is fixed, that page should be updated accordingly. Sebastian
This will soon be yet another stylo/gecko mismatch, so I would appreciate it if this was supported soon.
7 months ago