Why does this fail the W3C CSS parser?

1

Hi,

I am using the following to generate a responsive css grid:

Custom css on the block which is the css grid:

%root% {
–grid-max-col-count: 2;
–grid-min-col-size: 35rem;
–grid-number-of-gaps: calc(var(–grid-max-col-count) - 1);
–grid-col-size-calc: calc((100% - var(–grid-gap) * var(–grid-number-of-gaps)) / var(–grid-max-col-count));
}

var(–grid-gap) is a clamp function: clamp(2.4rem, calc(0.57vw + 2.22rem), 3rem)
Then this in the block’s grid template columns field:

repeat(auto-fit, minmax(min(100%,max(var(–grid-min-col-size), var(–grid-col-size-calc))), 1fr))

It works fine when rendered but the css validator gives this error:

Screenshot 2025-06-18 at 17.49.54
Screenshot 2025-06-18 at 17.49.541372×60 6.89 KB

Does anyone know what the issue is?

Thanks

2

Just guessing, but maybe you need to declare the CSS variables sooner? Have you tried to put the %root% block inside the CSS field for the page?

Also, not familiar with %root%, does :root work instead?

3

I think https://jigsaw.w3.org is just outdated. I got an error on ‘subgrid’ and nesting styles from this tool.

4

It doesn’t even recognize @layer :sob: