使用React.js动态调整CSS网格的大小和DnD

Question

我在React.js中使用styled-css-grid（https://github.com/azz/styled-css-grid）来构建css-grid。 我的渲染中的代码如下所示：

  <Grid columns={3} rows={3} gap="2px">
    <Cell>1</Cell>
    <Cell>2</Cell>
    <Cell>3</Cell>
    <Cell>4</Cell>
    <Cell>5</Cell>
    <Cell>6</Cell>
    <Cell>7</Cell>
    <Cell>8</Cell>
    <Cell>9</Cell>
  </Grid>

我尝试使用react-rnd和react-dnd，但这不适用于CSS网格。如何在网格布局中使用调整大小和DnD？我尝试创建如下布局：https://grid.layoutit.com/