Passing variables with jquery css function doesn't work?

Question

Im trying to make a grid-layout work in IE10 and am very close to the solution (at least I think so). I wrote this short script which should do the trick telling the div's in which way to be placed in the grid, since apparently IE can't autofill.

var x = 1;
var y = 1;
jQuery(".grid .flex").each(function () {
        jQuery(this).css('-ms-grid-row', x);
        jQuery(this).css('-ms-grid-column', y);
        console.log(x);
        console.log(y);
        if (y >= 3) {
            y = 1;
            x++;
        }
        else {
            y++;
        }
});

The right values for the div's are put out on console, but it seems that the .css() function does not quite get that they are just numbers. I does not work the way it is shown here, but when I change the method to "-ms-grid-rows(or -columns)" the script injects the style-tag just fine.

I think that jquery assumes the variables are pixel-measurements which would explain why "-ms-grid-rows" works and "-ms-grid-row" doesn't.

Is there a way to fix this? Can I tell explicitly that the variables are just numbers?

Sry if this all sounds a bit messy i'm just an intern trying to solve a problem because the senior developer is on vacation. Also im just a rookie with "web-development".

Answer 1

try this

 jQuery(this).css('-ms-grid-row', x.toString())