VAR setting in grid-template-columns assignment

Question

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?

score 0 · Accepted Answer · answered Feb 15 '22 at 19:29

0

You have to do the following:

repeat(auto-fit, minmax(calc(var(--n,10)*1rem), 1fr)

The 10 is the default value if you don't specify any value for --n

answered Feb 15 '22 at 19:29

Temani Afif

245,468
26
309
415

I'm still confused: Where do you (or how do you) set the value of --n to effect a change of the grid column display? I can do it with different class settings, but I was trying to change the --n value without redefining it within a class setting. – jmrker Feb 16 '22 at 06:11
1

@jmrker read this: https://stackoverflow.com/a/49618941/8620333 – Temani Afif Feb 16 '22 at 07:28

VAR setting in grid-template-columns assignment

1 Answers1