Not all aspects of the CSS Grid spec are supported

/* works */
.main {
  grid-column: 2 / 3;
}

/* Error: Unsupported property error: grid-column is not a supported property */
.main {
  grid-column: 2 / span 3;
}

Named areas don't work either, taking away a lot of the nicer aspects of CSS grids.

Yikes. This is a deal breaker for me - ran into this issue today.

I don't think grid-column isn't supported at all – what I see is that it works in some cases but not in all cases, e.g. this works fine:

.media-card:last-child {
  grid-column: 6/8;
}

while this does not work:

.playbook-sidebar {
  grid-column: 5/-1;
}

@media (max-width: 887px) {
  .playbook-sidebar {
    grid-column: 1/-1;
  }
}

I'm not even sure the media query is the cause for it not to work here – haven't really been able to figure out a pattern…

Update: this works 🤷‍♀️:

.playbook-sidebar {
  grid-column: 1/-1;
}

@media (min-width: 888px) {
  .playbook-sidebar {
    grid-column: 5/-1;
  }
}