使用Material UI，如何使两个图像垂直堆叠到另一个较大图像的右侧？

Question

假设我有三个图像。一个是其他两个高度的两倍，我想设计一个简单的网格，其中两个较小的网格垂直堆叠在较大的网格的右侧。照片的长宽比表示，如果较大的占2行x 3列，较小的占1行x 2列，则它们将以五列布局工作。我正在使用Material UI GridList组件（https://material-ui.com/api/grid-list/），并遵循API文档。无论我使用什么设置，一个较小的图像都会在较大的图像的右侧呈现，然后在其下方有一个相等大小的空白区域，而第三个图像则垂直堆叠在左侧较大的图像下方。

我怀疑这不是特定于React的，而是一些我不熟悉的简单HTML或CSS问题。我想我期望组件自动执行此操作。在演示（https://material-ui.com/demos/grid-list/）中，它会自动用图像填充水平空间，但现在我正在寻找，它对垂直空间的显示效果并不相同。

import React, {Component} from "react";
import ReactDOM from 'react-dom';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';

export class ImageGrid extends React.Component{

  constructor(props){
    super(props);
  }

  render() {

    const tileData = [
    {
      img: "ex_1.jpg",
      title: 'Image',
      author: 'author',
      cols: 3,
      rows:2,
    },
    {
      img: "ex_3.jpg",
      title: 'Image',
      author: 'author',
      cols: 2,
      rows:1,
    },
    {
      img: "ex_2.jpg",
      title: 'Image',
      author: 'author',
      cols: 2,
      rows:1,
    },

  ];
  const styles = theme => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      overflow: 'hidden',
      backgroundColor: theme.palette.background.paper,
    },
    gridList: {
      width: 1384,
      height: 320,
      float:right,
    },
  });


     return (

     <div className={styles.root}>
      <GridList component='div' cellHeight={150} spacing={8} cols={5} className={styles.gridList}>
        {tileData.map(tile => (
          <GridListTile component='div' cols={tile.cols} rows={tile.rows} key={tile.img}>
            <img src={tile.img} alt={tile.title} />
            <GridListTileBar
              title={tile.title}
              subtitle={tile.author}
            />
          </GridListTile>
        ))}
      </GridList>
    </div>

  );
  }
}