In the following CSS, I can change the setting for:
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
by manually altering 25rem to 33rem or 40rem (or some other #rem)
I want to change the value using the CSS var setting, but am having a brain fark.
I have tried:
.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; }
I can change the --chars value with JS, but neither changing 25 to 33 or '33rem' works
Is this just one area that the CSS var cannot be used because it is a count and not a string?