Css 如何在MaterialUI中列出新的行？

我正在尝试显示一系列视频标题和缩略图，比如视频卡在youtube首页上的显示方式。我如何让这些卡进入一个新的生产线，比如说每4张卡？目前，他们排队离开屏幕

编辑：还添加了我的视频卡代码

使其浮动：“左”，然后设置100%-25%以每4张卡生成一行

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>
  );
}

---

非常感谢。如果你不介意的话，你能解释一下这背后的逻辑吗？我理解25%变成100%，但剩下的浮动是怎么回事？@Sheen Document of and related

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>
  );
}

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