I've spent an entire afternoon on this issue and I'm completely stuck. After realizing that IE11 doesn't support grid-template, I learned that I need to use -ms-grid-columns and -ms-grid-rows instead. I am attempting to generate CSS and inject it using a Vue method, which works perfectly in all browsers except IE11:
gridTemplate: function(){
var gridTemplate = "display: grid;";
gridTemplate += "grid-template: repeat(4, 1fr ) / repeat(4, 1fr);";
gridTemplate += "grid-gap: 3px;";
return gridTemplate;
}
To tackle the issue with IE11, I modified the code within a conditional check specifically for that browser:
gridTemplate: function(){
var gridTemplate = "display: -ms-grid;";
gridTemplate += " -ms-grid-columns: " + _.fill(Array(4),"1fr").join(" ") + ";";
gridTemplate += " -ms-grid-rows: " + _.fill(Array(4),"1fr").join(" ") + ";";
gridTemplate += "grid-gap: 3px;";
return gridTemplate;
}
Though when I console log the result before returning the CSS, everything seems correct:
display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr; -ms-grid-rows: 1fr 1fr 1fr 1fr; grid-gap: 3px;<div style="display: -ms-grid;">-ms-grid-columns and -ms-grid-rows. I have tested lodash's _.fill in other browsers and it works fine, so I suspect that's not the issue. The flexibility of dynamically determining the number of rows and columns is crucial for my project, hence why I cannot simply hardcode it in auto-prefixed SCSS.
I am starting to wonder if this could be related to Vue in some way. If not, I would greatly appreciate any suggestions on how to solve this issue. Thanks!