Блог

Предположим, у меня есть три изображения. Одно в два раза больше высоты двух других, и я хотел бы создать простую сетку, в которой два меньших изображения располагаются вертикально справа от большего. Соотношение сторон фотографий означает, что они будут работать в макете с пятью столбцами, если больший занимает 2 строки х 3 столбца, а меньшие — 1 строка х 2 столбца. Я использую компонент Material UI GridList (https://material-ui.com/api/grid-list /) и следуя документации API. Независимо от того, какие настройки я использую, одно из меньших изображений отображается справа от большего, затем под ним находится пустая область равного размера, а третье изображение укладывается вертикально под большим слева.

Я подозреваю, что это не зависит от реакции, а какая-то простая проблема 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>

  );
  }
}