title: How to make a list in MaterialUI go to a new line?
body: <pre><code>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(() =&gt; createStyles({
    root: {
      display: 'inline-flex',
    },
    item: {
      padding: '80px 40px',
    },
  
  }));
  
  export default function VideoList(props: any) {
    const { videos } = props;
    const classes = useStyles();
    return (
      &lt;div&gt;
        &lt;List className={clsx(classes.root)}&gt;
          {videos.map((video: any) =&gt; (
            &lt;ListItem className={classes.item} button key={video}&gt;
              &lt;VideoCard videoTitle={video.title} thumbnailImage={video.imageSrc} key={video} /&gt;
            &lt;/ListItem&gt;
          ))}
        &lt;/List&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <pre><code>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 (
      &lt;div&gt;
        &lt;Thumbnail imageSrc={thumbnailImage} /&gt;
        &lt;Typography&gt;{videoTitle}&lt;/Typography&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Edit: added my VideoCard code aswell</p>