折叠Grid React Material Design中的空白

Question

嗨，大家好，我有一个关于材料用户界面的快速问题。 有什么方法可以像在底部图像上那样垂直折叠Grid项？ 想到的唯一解决方案是将它们放在两列中，但由于网格并不总是在两列中显示，因此无法在更大或更小的屏幕上使用。

const {
  Grid,
  Paper
} = window['material-ui'];

class GridTest extends React.Component {
  render () {
    return (
      <Grid container xs={12} spacing={8} style={{background:'#eee'}}>
        <Grid item xs={6}><Paper style={{ height: 300}} /></Grid>
        <Grid item xs={6}><Paper style={{ height: 100}} /></Grid>
        <Grid item xs={6}><Paper style={{ height: 200}} /></Grid>
        <Grid item xs={6}><Paper style={{ height: 300}} /></Grid>
      </Grid>
    )
  }
}

ReactDOM.render(
  <GridTest />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@material-ui/core@3.9.2/umd/material-ui.production.min.js"></script>

<div id="root"></div>

我的目标是

对不起，我语法不好，我很生锈，像地狱：D 感谢您提供有关

的任何信息