How to make a list in MaterialUI go to a new line?

Question

import React from 'react';
import {
  List, ListItem,
} from '@material-ui/core';
import {
  makeStyles, createStyles,
} from '@material-ui/core/styles';
import clsx from 'clsx';
import VideoCard from './VideoCard';

const useStyles = makeStyles(() => createStyles({
  root: {
    display: 'inline-flex',
  },
  item: {
    padding: '80px 40px',
  },

}));

export default function VideoList(props: any) {
  const { videos } = props;
  const classes = useStyles();
  return (
    <div>
      <List className={clsx(classes.root)}>
        {videos.map((video: any) => (
          <ListItem className={classes.item} button key={video}>
            <VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

import React from 'react';
import Typography from '@material-ui/core/Typography';
import clsx from 'clsx';
import Thumbnail from './Thumbnail';

export default function VideoCard(props: any) {
  const { thumbnailImage, videoTitle } = props;
  return (
    <div>
      <Thumbnail imageSrc={thumbnailImage} />
      <Typography>{videoTitle}</Typography>
    </div>
  );
}

I am trying to display a series of video titles and thumbnails (like how video cards are displayed on the frontpage of youtube). How do I get the cards to go to a new line say every 4 cards? Currently, they line up and go off screen.

Edit: added my VideoCard code aswell

score 1 · Accepted Answer · answered May 18 '20 at 21:22

1

Make it float: 'left' and then set 100% - 25% to make a new line every 4 cards

const useStyles = makeStyles(() =>
  createStyles({
    root: {
      width: "100%",
      display: "inline-block"
    },
    item: {
      padding: "80px 40px",
      float: 'left',
      width: '25%'
    }
  })
);

answered May 18 '20 at 21:22

keikai

14,085
9
49
68

1

Thank you! If you don't mind, could you explain the logic behind this? I understand the 25% into 100%, but what does the float left do? – Sheen May 19 '20 at 06:39
@Sheen Document of [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) and related [QA](https://stackoverflow.com/a/9068062/11872246) – keikai May 19 '20 at 06:49

How to make a list in MaterialUI go to a new line?

1 Answers1