Используя пользовательский интерфейс материалов, как получить два изображения для вертикального размещения справа от другого большого изображения?

Question

Предположим, у меня есть три изображения.Один в два раза больше остальных двух, и я хотел бы создать простую сетку, в которой два меньших элемента располагаются вертикально справа от большего.Соотношение сторон фотографий означает, что они будут работать в пятиколоночном макете, если больший занимает 2 строки x 3 столбца, а меньшие - 1 строку x 2 столбца.Я использую компонент Material GILrid UI (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>

  );
  }
}