grid-area in VueJS

As you can probably tell from recent posts, I'm making extensive use of CSS grid layouts... I'm also having to support IE11 while doing so, oh joy. The thing is I like the grid-area approach to defining where things should go within the layout, and I write it in the following way:

{ 
  ... 
  grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end; 
  ...
}

Which is cool, but it took me ages to figure out why it wasn't working... even though it was simple enough to get it working in IE11 too where I replaced it with four declarations:

{ 
  ... 
  grid-row: grid-row-start; 
  grid-row-span: (grid-row-end - grid-row-start); 
  grid-column: grid-column-start; 
  grid-column-span: (grid-column-end - grid-column-start); 
  ...
}

I was left though with it still not working as expected until I clocked that Vue was replacing grid-row-end and grid-column-end with auto. I then clocked that the JS syntax is slightly different in that the final two values can also use spans like this:

{ 
  ... 
  grid-area: grid-row-start / grid-column-start / span (grid-row-end - grid-row-start) / span (grid-column-end - grid-column-start); 
  ...
}

Setting it as four integers was not working, setting it as integers prefixed with span was working in Vue where the final two integers were getting replaced with auto - so I replaced all instances with width and depth spans and updated my script accordingly, the required output is now:

{ 
  ... 
  grid-area: grid-row-start / grid-column-start / span width / span depth; 
  ...
}

Combined with the specificity required for IE11 we then have the following:

{ 
  ... 
  grid-row: grid-row-start; 
  grid-row-span: width; 
  grid-column: grid-column-start; 
  grid-column-span: depth; 
  grid-area: grid-row-start / grid-column-start / span width / span depth; 
  ...
}

Which, when converted to a method function, results in this:

placeElement: function (x, y, width, depth) {
  return { 
    gridRow: x, 
    gridRowSpan: width, 
    gridColumn: y, 
    gridColumnSpan: depth, 
    gridArea: [x, y, "span " + width, "span " + depth].join(" / "),
  };
}

Not brilliant to look at but Vue will auto prefix the individual values so that gridRow becomes -ms-grid-row etc. for IE11 and won't bother outputting anything other than the grid-area for Chrome et al.

It also seems cleaner in that we have the four arguments and it looks more natural and logical somehow to define how many rows and columns the element should span.

Along with that, returning an object means we can then add to it in subsequent functions.