En el siguiente CSS, puedo cambiar la configuración para:

 grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));

alterando manualmente 25rem a 33rem o 40rem (o algún otro #rem)

Quiero cambiar el valor usando la configuración de CSS var, pero estoy teniendo problemas con el cerebro.

Yo he tratado:

 .mainGrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); /* original version OK */ /* none of the following work grid-template-columns: repeat(auto-fit, minmax(var(--chars), 1fr)); --chars: '25rem'; grid-template-columns: repeat(auto-fit, minmax(var(--chars)+'rem', 1fr)); --chars: 25; */ } .mainGrid > section { border: 1px solid black; }

Puedo cambiar el valor --chars con JS, pero no funciona cambiar 25 a 33 o '33rem'

¿Es esta solo un área en la que CSS var no se puede usar porque es un conteo y no una cadena?