Свернуть пробелы в Grid React Material Design

Question

Привет, ребята, у меня есть быстрый вопрос для пользователя материала там.Есть ли способ свертывания элементов сетки по вертикали, как на изображении внизу?Единственное решение, которое приходит на ум - поместить их в два столбца, но оно не будет работать на экранах большего или меньшего размера, поскольку сетка не всегда отображается в двух столбцах.

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 Спасибо за любую информацию по этому