React Material UI GridList cells don't wrap correctly

Question

when using Material-UI GridList the cells doesnt wrap "correctly" in the grid. when diving in the css I noticed that it uses flex-wrap which is suppose to flex rows but I'm sure there is a way to use this component with an option to fill all the blank spaces.

code:

const useStyles = makeStyles((theme) => ({
root: {
  display: "flex",
  flexWrap: "wrap",
  justifyContent: "space-around",
  overflow: "hidden",
  backgroundColor: theme.palette.background.paper,
  paddingTop: theme.spacing(4),
},
gridList: {
  width: 500,
  height: '100%',
},
listItem: {
  borderRadius: theme.borderRadius['secondary'],
  overflow: "hidden",
},
}));

function Gallery(props) {
  const styles = useStyles();
  const cols = [
  [2, 2],
  [1, 2],
  [1, 2],
  [2, 1],
  [1, 1],
  [1, 1],
  [1, 1],
];

const renderItem = (tile, index) => (
  <GridListTile
    classes={{ root: styles.listItem }}
    key={tile.image}
    cols={cols[index % cols.length][0]}
    rows={cols[index % cols.length][1]}
  >
    <img src={tile.image} alt={tile.title} />
  </GridListTile>
);
return (
  <div className={styles.root}>
    <GridList
      cellHeight={160}
      className={styles.gridList}
      cols={3}
      spacing={10}
    >
      {data.items.map(renderItem)}
    </GridList>
  </div>
);
}

I appreciate the help

Answer 1

I referenced the documentation of MaterialUI
You were specifying both rows and columns. Removing rows={cols[index % cols.length][1]} fixed the issue. Here is the working sample. (Images are taken from sample)

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';

const App = () => {
  const useStyles = makeStyles((theme) => ({
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      justifyContent: 'space-around',
      overflow: 'hidden',
      backgroundColor: theme.palette.background.paper,
      paddingTop: theme.spacing(4),
    },
    gridList: {
      width: 500,
      height: '100%',
    },
    listItem: {
      overflow: 'hidden',
    },
  }));

  const styles = useStyles();
  const cols = [
    [2, 2],
    [1, 2],
    [1, 2],
    [2, 1],
    [1, 1],
    [1, 1],
    [1, 1],
  ];

  const tileData = [
    {
      img: '/static/images/grid-list/breakfast.jpg',
      title: 'Breakfast',
      author: 'jill111',
      cols: 2,
      featured: true,
    },
    {
      img: '/static/images/grid-list/burgers.jpg',
      title: 'Tasty burger',
      author: 'director90',
    },
    {
      img: '/static/images/grid-list/camera.jpg',
      title: 'Camera',
      author: 'Danson67',
    },
    {
      img: '/static/images/grid-list/morning.jpg',
      title: 'Morning',
      author: 'fancycrave1',
      featured: true,
    },
    {
      img: '/static/images/grid-list/hats.jpg',
      title: 'Hats',
      author: 'Hans',
    },
    {
      img: '/static/images/grid-list/honey.jpg',
      title: 'Honey',
      author: 'fancycravel',
    },
    {
      img: '/static/images/grid-list/vegetables.jpg',
      title: 'Vegetables',
      author: 'jill111',
      cols: 2,
    },
    {
      img: '/static/images/grid-list/plant.jpg',
      title: 'Water plant',
      author: 'BkrmadtyaKarki',
    },
    {
      img: '/static/images/grid-list/mushroom.jpg',
      title: 'Mushrooms',
      author: 'PublicDomainPictures',
    },
    {
      img: '/static/images/grid-list/olive.jpg',
      title: 'Olive oil',
      author: 'congerdesign',
    },
    {
      img: '/static/images/grid-list/star.jpg',
      title: 'Sea star',
      cols: 2,
      author: '821292',
    },
    {
      img: '/static/images/grid-list/bike.jpg',
      title: 'Bike',
      author: 'danfador',
    },
  ];

  const renderItem = (tile, index) => (
    <GridListTile
      classes={{ root: styles.listItem }}
      key={tile.image}
      cols={cols[index % cols.length][0]}
    >
      <img src={tile.img} alt={tile.title} />
    </GridListTile>
  );
  return (
    <div className={styles.root}>
      <GridList
        cellHeight={160}
        className={styles.gridList}
        cols={3}
        spacing={10}
      >
        {tileData.map(renderItem)}
      </GridList>
    </div>
  );
};

export default App;