与CSS-Grid组件一起使用时，React组件未正确跨越

Question

我制作了一个CSS网格组件，并将其他React组件放入其中。 一切都很好，除了组件没有像他们应该跨越网格区域。它们只是按照布局顺序放置在各个区域，而不跨越区域。这是否与缺少对子网格的支持有关？

我得到了什么：

我想得到什么：

/* GRID COMPONENT CSS */

.grid {
  display: grid;
  height: 100%;
  grid-template-areas:
    "a"
    "b"
    "d"
    "c"
    "e";
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}


@media (min-width: 1200px) {
  .grid {
    grid-template-columns: 1fr 330px;
    grid-template-areas:
    "a a"
    "b b"
    "c d"
    "e d";
  }
}

<!-- GRID COMPONENT HTML -->

import React from 'react';
import css from './grid.scss';

export default props => (
  <div className={css.grid}>
    <props.A area={css.a} />
    <props.B area={css.b} />
    <props.C area={css.c} />
    <props.D area={css.d} />
  </div>
);

{{1}}