[css-grid] translate `grid` property syntax into IE safe syntax when possible

This code

.grid {
    display: grid;
    grid:
      "left .... right" 100px /
       1fr  10px   1fr;
}

.left-cell { grid-area: left; }

.right-cell { grid-area: right; }

Should translate into this:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 10px 1fr;
  -ms-grid-rows: 100px;
  grid:
      "left .... right" 100px /
       1fr  10px   1fr;
}

.left-cell {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  grid-area: left;
}

.right-cell {
  -ms-grid-row: 1;
  -ms-grid-column: 3;
  grid-area: right;
}

[yepninja]

@Dan503 You are damn right! Your case is definitely the case of grid-template shortcut. grid shortcut also supports grid-template but also supports shortcuts with grid-auto- properties. So there are two reasons to use grid shortcut:

1. You don’t want to write ‘-template’ in property and want to use shorter property.
2. You want to use grid-auto- properties in the shortcut.

And of course, you want that these properties work in IE (that why we are here). So if you use grid-template you can be sure that everything works in IE. So in your case it’s better to use grid-template. If someone wants to use grid for the second reason, he must understand that grid-auto- properties don’t work in IE at all.

[ai]

Hm. I will look later on this week.